Page 182 - css揭秘

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

你可以在图 6-9 中看到复选框和 label 现在的样子。原来的复选框仍然
是可见的，待会儿我们会将其隐藏。现在需要给复选框的勾选状态加上不同
的样式。样式可以很简单，比如换种颜色，再加上勾选标记： 图 6-9
左边是原生复选框，右边是我们
input[type="checkbox"]:checked + label::before { 经过初步自定义的复选框
content: '\2713';
background: yellowgreen;
}
图 6-10
在图 6-10 中可以看到，这个伪元素已经俨然是一个经过简单美化的复
在复选框的勾选状态下，伪元素
选框了，而且功能完备。现在，我们需要把原来的复选框以一种不损失可 也需要美化一番
访问性的方式隐藏起来。这意味着不能使用 display: none，因为那样会
把它从键盘 tab 键切换焦点的队列中完全删除。我们改用另一种方法来达到
目的： ! 在使用宽松的选择符时一
定要小心。对于那些后面没有
input[type="checkbox"] { label 的复选框来说（比如它是
position: absolute; 被嵌套进一个 label 的），使用
clip: rect(0,0,0,0); input[type="checkbox"] 选择符
}
也会把它们隐藏起来，从而损害
可用性。
这就完成了，我们得到了一个简单定制化的复选框！我们还可以进一步
优化，比如在它聚焦或禁用时改变它的样式（效果如图 6-11 所示）：

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;
}
图 6-11
你甚至可以用过渡或动画来让各个状态之间的切换更加平滑，或者脑子 上图：自定义复选框的聚焦状态；
中图：自定义复选框被禁用的状
1①
一热创建一个拟物化的开关。这方面的可能性真的是无穷无尽 ！
态；下图：自定义复选框被勾选
的状态
① 尽管可能性是无穷无尽的，但仍然要避免把复选框设置为圆形：绝大多数用户会把圆形的开
关理解为单选框。这个道理也适用于方形的单选框。

31 自定义复选框 151

඀ࠡ JOEC