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;
}