Lynx | 小熊写字的地方

自定义复选框

2016-05-18

思路：借助于组合选择符和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揭秘》