自定义复选框checkbox样式
html 部分代码：
<input type="checkbox" id="myCheck">
<label for="myCheck"></label>
1
2
2
css 样式
#myCheck {
display: none;
}
#myCheck + label{
background-color: white;
border-radius: 5px;
border:1px solid #d3d3d3;
width:20px;
height:20px;
display: inline-block;
text-align: center;
vertical-align: middle;
line-height: 20px;
}
#myCheck:checked + label{
background: #409eff;
border: none;
position: relative;
}
#myCheck:checked + label::after{
content:"\2714";
width: 100%;
border-radius: 5px;
position: absolute;
left: 0;
top: 0;
color: #fff;
border:1px solid #409eff;
background: #409eff;
}
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
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
效果如下：
编辑 (opens new window)
上次更新: 7/1/2024, 4:56:33 PM