1
2<label class="checkbox-container">
3  <input type="checkbox" class="checkbox-input" >
4  <span class="checkbox-custom"></span>
5  Checkbox Label
6</label>
7

1
2.checkbox-container {
3  display: flex;
4  align-items: center;
5  font-size: 16px;
6  color: #000000;
7  cursor: pointer;
8}
9
10.checkbox-input {
11  position: absolute;
12  opacity: 0;
13  cursor: pointer;
14  height: 0;
15  width: 0;
16}
17
18.checkbox-custom {
19  position: relative;
20  height: 20px;
21  width: 20px;
22  background-color: #ffffff;
23  border: 2px solid #3b82f6;
24  border-radius: 4px;
25  margin-right: 10px;
26  transition: all 0.2s;
27}
28
29.checkbox-input:checked ~ .checkbox-custom {
30  background-color: #3b82f6;
31  border-color: #3b82f6;
32}
33
34.checkbox-custom:after {
35  content: "";
36  position: absolute;
37  display: none;
38  left: 8px;
39  top: 2.3333333333333335px;
40  width: 6.666666666666667px;
41  height: 10px;
42  border: solid #ffffff;
43  border-width: 0 2px 2px 0;
44  transform: rotate(45deg);
45}
46
47.checkbox-input:checked ~ .checkbox-custom:after {
48  display: block;
49}
50
51.checkbox-input:focus ~ .checkbox-custom {
52  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
53}
54