1.原理
就是将浏览器原生checkbox隐藏，对label进行相关操作。因为label和checkbox时绑在一起的，所以点击label就会选中
2.实现效果
演示地址：https://klren0312.github.io/HTMLStu/%E8%87%AA%E5%AE%9A%E4%B9%89checkbox/checkbox.html
图片.png
3.代码
提供一种
图片.png
1.html代码
原生的checkbox和对应的label，注意lable的for要与checkbox的id对应
<input type="checkbox" value="markcheckbox1" id="markcheckbox1">
<label class="mark" for="markcheckbox1">markcheckbox1</label>
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;
}
