1.原理

就是将浏览器原生checkbox隐藏，对label进行相关操作。因为label和checkbox时绑在一起的，所以点击label就会选中

2.实现效果

演示地址：klren0312.github.io/HTMLStu/%E8…

3.代码

提供一种

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