自定义复选框

May 18 2016 前端

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

CSS