不知道小伙伴们在使用复选框(checkbox)的时候有没有觉得默认的样式实在太丑了，自己想换一个好看点的样式又感觉挺麻烦的，前几天博主就遇到了这个麻烦，然后翻阅了书籍找到了解决方法，现在和大家分享一下
我们先看一下复选框的默认样式，这种默认的复选框样式还是不够美观的，那么下面我们把它美化一下
有一个元素和复选框是形影不离、息息相关的，那就是<label>，当<label>元素和复选框关联之后，也可以起到触发开关的作用
我们可以为label添加伪元素，并基于复选框的状态来为其设置样式，然后就可以把真正的复选框隐藏起来，再把伪元素的内容进行美化，用来顶替原来的复选框~
从下面一段代码开始：
<input type="checkbox" id="check-box" />
<label for="check-box">哈哈哈哈</label>
然后我们在label的前面生成一个伪元素，作为美化版的复选框，并加上样式：
input[type="checkbox"] + label::before {
content: '\a0'; /* 不换行空格 */
display: inline-block;
vertical-align: .1em;
width: .8em;
height: .8em;
margin-right: .2em;
border-radius: .2em;
background: silver;
text-indent: .15em;
line-height: .65; }
现在的页面是这样的：
现在可以看见那个伪元素了，复选框仍然可见，我们等一下把它隐藏，我们先给复选框的勾选状态加上不同的样式：
input[type="checkbox"]:checked + label::before {
content: '\2713';
background: yellowgreen; }
正如上图所示，现在样式已经出来了，我们再将原来的复选框隐藏掉，注意不能使用display:none来隐藏，因为那样会
把它从键盘tab键切换焦点的队列中完全删除，我们用下面的方法来隐藏：
input[type="checkbox"] {
position: absolute;
clip: rect(0,0,0,0);
}
clip属性对元素进行裁剪，这里我们把复选框全部裁剪掉，不了解用法的小朋友可以自行查阅~
现在就得到下面的样式啦：
我们还可以进行进一步的优化，比如在聚焦或者禁用的时候改变它的样式：
input[type="checkbox"]:focus + label::before {
box-shadow: 0 0 .1em .1em #58a; }
input[type="checkbox"]:disabled + label::before {
background: gray;
box-shadow: none;
color: #555; }