自定义复选框

1.为什么要自定义复选框？

    因为原生复选框的默认样式比较少，不太美观，而且当我们为其修改样式时，会发现，除了可以设置宽度和高度等少数样式外，其余样式都没有效果。这时，我们需要自己来设计一个漂亮的复选框。

2.如何自定义复选框？

    解决方法很简单。主要分为两步。第一步是，添加label元素让其与复选框产生关联。第二步是通过给label元素设置::before伪元素，让其与原生复选框之间生成一个自定义的复选框，然后通过:checked, :focus, :disabled等伪类选择器为自定义复选框丰富样式。

具体实现代码如下：

HTML:

<input type="checkbox" id="running"><label for="running">跑步</label><input type="checkbox" id="game"><label for="game">游戏</label><input type="checkbox" id="study"><label for="study">学习</label><!-- 通过让label元素中for的属性值等于复选框中id的属性值，使其产生关联，之后再点击label，复选框也会被选中或取消选中。 -->

CSS:

//添加自定义复选框input[type="checkbox"] + label::before{  content:"\00a0";//Unicode字符集，生成“空格”  display:inline-block;  width:12px;  height:12px;  line-height:12px;  border-radius:3px;  margin:3px;  background-color:yellowgreen;}//添加选中样式input[type="checkbox"]:checked+label::before{  content:"\2713";//Unicode字符集，生成“勾选符号”  color:red;}//添加聚焦样式input[type="checkbox"]:focus + label::before{  box-shadow: 0 0 2px 2px #58a;}//隐藏原生复选框#running{  position:absolute;  clip:rect(0,0,0,0);  //也可以使用display:none等方法隐藏复选框，不过那样就无法用Tab键使复选框聚焦}

效果如下：

附：

Unicode字符集：https://unicode-table.com/cn/#control-character

在线代码演示：https://jsfiddle.net/Anthony_chao/vokuw76p/4/