【CSS】自定义复选框

思路：借助于组合选择符和 before 伪元素，利用 content 属性改变伪元素的内容，为其添加我们想要的样式。并将原来的复选框隐藏掉。

HTML 结构如下：

<input type="checkbox" id="awesome">
<label for="awesome">Awesome!</label>

首先，生成一个伪元素，先给这个伪元素添加一些样式。

input[type="checkbox"] + label::before{
    content: '\a0'; /*不换行空格*/
    display: inline-block;
    vertical-align: .2em;
    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，那样会完全删除这个 dom 元素。用另一种办法：

input[type="checkbox"]{
    position: absolute;
    clip:rect(0,0,0,0);
}

这时候，我们自定义的复选框就已经完成了。

接近完成

最后，可以给这个复选框再加上聚焦和禁用状态下的样式。

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

最终效果

---

参考：《CSS揭秘》

更多技术类文章，请访问本人博客，博客中收纳了个人学习工作中的读书笔记、成长感悟等，欢迎交流。