1.checkbox-container {
2  display: inline-block;
3  position: relative;
4  padding-left: 35px;
5  margin-bottom: 12px;
6  cursor: pointer;
7  font-size: 16px;
8  user-select: none;
9}
10
11.custom-checkbox {
12  position: absolute;
13  opacity: 0;
14  cursor: pointer;
15  height: 0;
16  width: 0;
17}
18
19.checkmark {
20  position: absolute;
21  top: 0;
22  left: 0;
23  height: 25px;
24  width: 25px;
25  background-color: #eee;
26  border-radius: 4px;
27  transition: background-color 0.3s;
28  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
29}
30
31.checkmark:after {
32  content: "";
33  position: absolute;
34  display: none;
35  left: 9px;
36  top: 5px;
37  width: 5px;
38  height: 10px;
39  border: solid white;
40  border-width: 0 3px 3px 0;
41  transform: rotate(45deg);
42}
43
44.custom-checkbox:checked ~ .checkmark {
45  background-color: #2196F3;
46  box-shadow: 0 3px 7px rgba(33, 150, 243, 0.3);
47}
48
49.custom-checkbox:checked ~ .checkmark:after {
50  display: block;
51}
52
53@keyframes checkAnim {
54  0% {
55    height: 0;
56  }
57
58  100% {
59    height: 10px;
60  }
61}
62
63.custom-checkbox:checked ~ .checkmark:after {
64  animation: checkAnim 0.2s forwards;
65}
66