1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
input[type="checkbox"] {
     width: 12px;
     height: 12px;
     display: inline-block;
     text-align: center;
     vertical-align: middle;
     line-height: 12px;
     position: relative;
 }
  
 input[type="checkbox"]::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     background: #fff;
     width: 100%;
     height: 100%;
     border: 1px solid #CACDCF
}
  
input[type="checkbox"]:checked::before {
    content: "\2713";
    background-color: #2196F3;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border: 1px solid #2196F3;
    font-size: 12px;
    font-weight: bold;
}