1.container input {
2  position: absolute;
3  opacity: 0;
4  cursor: pointer;
5  height: 0;
6  width: 0;
7}
8
9.container {
10  display: block;
11  position: relative;
12  cursor: pointer;
13  font-size: 30px;
14  user-select: none;
15}
16
17.checkmark {
18  position: relative;
19  top: 0;
20  left: 0;
21  height: 1.6em;
22  width: 1.6em;
23  border-radius: 50%;
24  background: #ffeded38;
25  transition: all 0.2s ease;
26}
27
28.checkmark {
29  opacity: 0.4;
30}
31
32.container input:checked ~ .checkmark {
33  background: linear-gradient(144deg,#af40ff,#5b42f3 50%,#00ddeb);
34  opacity: 0.9;
35  transition: all 0.2s ease;
36}
37
38.checkmark:after {
39  content: "";
40  position: absolute;
41  display: none;
42}
43
44.container input:checked ~ .checkmark:after {
45  display: block;
46}
47
48.container .checkmark:after {
49  left: 0.61em;
50  top: 0.43em;
51  width: 0.25em;
52  height: 0.5em;
53  border: solid rgb(255, 255, 255);
54  border-width: 0 0.15em 0.15em 0;
55  transform: rotate(45deg);
56}