1/* Hide the default checkbox */
2.container input {
3  position: absolute;
4  opacity: 0;
5  cursor: pointer;
6  height: 0;
7  width: 0;
8}
9
10.container {
11  display: block;
12  position: relative;
13  cursor: pointer;
14  font-size: 1.5rem;
15  user-select: none;
16}
17
18/* Create a custom checkbox */
19.checkmark {
20  --clr: #0B6E4F;
21  position: relative;
22  top: 0;
23  left: 0;
24  height: 1.3em;
25  width: 1.3em;
26  background-color: #ccc;
27  border-radius: 50%;
28  transition: 300ms;
29}
30
31/* When the checkbox is checked, add a blue background */
32.container input:checked ~ .checkmark {
33  background-color: var(--clr);
34  border-radius: .5rem;
35  animation: pulse 500ms ease-in-out;
36}
37
38/* Create the checkmark/indicator (hidden when not checked) */
39.checkmark:after {
40  content: "";
41  position: absolute;
42  display: none;
43}
44
45/* Show the checkmark when checked */
46.container input:checked ~ .checkmark:after {
47  display: block;
48}
49
50/* Style the checkmark/indicator */
51.container .checkmark:after {
52  left: 0.45em;
53  top: 0.25em;
54  width: 0.25em;
55  height: 0.5em;
56  border: solid #E0E0E2;
57  border-width: 0 0.15em 0.15em 0;
58  transform: rotate(45deg);
59}
60
61@keyframes pulse {
62  0% {
63    box-shadow: 0 0 0 #0B6E4F90;
64    rotate: 20deg;
65  }
66
67  50% {
68    rotate: -20deg;
69  }
70
71  75% {
72    box-shadow: 0 0 0 10px #0B6E4F60;
73  }
74
75  100% {
76    box-shadow: 0 0 0 13px #0B6E4F30;
77    rotate: 0;
78  }
79}