1.原理
就是将浏览器原生checkbox隐藏,对label进行相关操作。因为label和checkbox时绑在一起的,所以点击label就会选中
2.实现效果
图片.png
3.代码
提供一种
图片.png
1.html代码
原生的checkbox和对应的label,注意lable的for要与checkbox的id对应
markcheckbox1
2.css代码
1)将原生的checkbox隐藏
input[type="checkbox"] {
/*
display: none;这样会让tab键无法选取自定义的checkbox,所以使用下面的方法
clip 属性剪裁绝对定位元素。
*/
position: absolute;
clip: rect(0, 0, 0, 0)
}
2)设置checkbox样式
.mark是label的class,所以::before就是设置label前面的样式
.mark::before {
content: '\a0';
display: inline-block;
border: 1px solid silver;
text-align: center;
width: 20px;
height: 20px;
font-weight: bold;
}
3)设置check选中后的样式
input[type="checkbox"]:checked+.mark::before {
content: '\2713';
color: #FA8E53;
}