custom checkbox in css

1/* Custom CSS Checkbox */
2<input type="checkbox">
3<label>
4  <span class="custom-checkbox"></span> my checkbox
5</label>
6
7[type="checkbox"] {
8    opacity: 0;
9    position: absolute;
10}
11
12.custom-checkbox {
13    min-width: 0.75em;
14    min-height: 0.75em;
15    margin-right: 0.75em;
16    border: 2px solid currentColor;
17    border-radius: 50%;
18    display: inline-block;
19}
20
21[type="checkbox"]:checked+label .custom-checkbox {
22    border-color: blue;
23    background: blue;
24    box-shadow: inset 0 0 0 2px white;
25}

1.checkbox-label {
2    display: block;
3    position: relative;
4    margin: auto;
5    cursor: pointer;
6    font-size: 22px;
7    line-height: 24px;
8    height: 24px;
9    width: 24px;
10    clear: both;
11}
12
13.checkbox-label input {
14    position: absolute;
15    opacity: 0;
16    cursor: pointer;
17}
18
19.checkbox-label .checkbox-custom {
20    position: absolute;
21    top: 0px;
22    left: 0px;
23    height: 24px;
24    width: 24px;
25    background-color: transparent;
26    border-radius: 5px;
27    transition: all 0.3s ease-out;
28    -webkit-transition: all 0.3s ease-out;
29    -moz-transition: all 0.3s ease-out;
30    -ms-transition: all 0.3s ease-out;
31    -o-transition: all 0.3s ease-out;
32    border: 2px solid #000;
33}
34
35
36.checkbox-label input:checked ~ .checkbox-custom {
37    background-color: #FFEA00;
38    border-radius: 5px;
39    -webkit-transform: rotate(0deg) scale(1);
40    -ms-transform: rotate(0deg) scale(1);
41    transform: rotate(0deg) scale(1);
42    opacity:1;
43    border: 2px solid #000;
44}
45
46.checkbox-label .checkbox-custom::after {
47    position: absolute;
48    content: "";
49    left: 12px;
50    top: 12px;
51    height: 0px;
52    width: 0px;
53    border-radius: 5px;
54    border: solid #000;
55    border-width: 0 3px 3px 0;
56    -webkit-transform: rotate(0deg) scale(0);
57    -ms-transform: rotate(0deg) scale(0);
58    transform: rotate(0deg) scale(0);
59    opacity:1;
60    transition: all 0.3s ease-out;
61    -webkit-transition: all 0.3s ease-out;
62    -moz-transition: all 0.3s ease-out;
63    -ms-transition: all 0.3s ease-out;
64    -o-transition: all 0.3s ease-out;
65}
66
67
68.checkbox-label input:checked ~ .checkbox-custom::after {
69  -webkit-transform: rotate(45deg) scale(1);
70  -ms-transform: rotate(45deg) scale(1);
71  transform: rotate(45deg) scale(1);
72  opacity:1;
73  left: 8px;
74  top: 3px;
75  width: 6px;
76  height: 12px;
77  border: solid #000000;
78  border-width: 0 2px 2px 0;
79  background-color: transparent;
80  border-radius: 0;
81}