Page 183 - css揭秘

试一试 play.csssecrets.io/checkboxes

向 Ryan Seddon（http://thecssninja.com）脱帽致敬，感谢他最先提
出这个效果。这个技巧现在被大家称作复选框 hack（http://thecssninja.

com/css/custom-inputs-using-css）。Ryan 曾用这个创意实现了各种需要保持
状态的 UI 组件（http://labs.thecssninja.com/bootleg），比如模态对话框、下
致 敬
拉菜单、标签页、跑马灯等，不过像这样滥用复选框很容易导致可访问性
上的问题。

开关式按钮

说到开关式按钮，HTML 并没有提供一种原生的方式来生成它，但我们
可以利用“复选框 hack”的思路来模拟它。开关式按钮与复选框的行为十分
相似，可以用来切换某个选项的开关状态：启用时，它是被按下的状态；停
用时，它就是浮起的状态。在语义上，开关式按钮和复选框并没有本质上的
差别，因此可以放心地使用这个技巧，不用担心语义上有问题。

如果想用这个技巧来生成开关式按钮，其实只需要把 label 设置为按钮
图 6-12 的样式即可，并不需要用到伪元素。具体来说，要生成图 6-12 中的开关式
开关式按钮的两种状态 按钮，代码可以这样写：

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

input[type="checkbox"] + label {
display: inline-block;
padding: .3em .5em;
background: #ccc;
background-image: linear-gradient(#ddd, #bbb);
border: 1px solid rgba(0,0,0,.2);
border-radius: .3em;
box-shadow: 0 1px white inset;
text-align: center;
text-shadow: 0 1px 1px white;
}

input[type="checkbox"]:checked + label,
input[type="checkbox"]:active + label {
box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset;
border-color: rgba(0,0,0,.3);
background: #bbb;
}

不过，在使用开关式按钮时仍需慎重。在绝大多数场景下，开关式按钮
对可用性有负面作用，因为它们很容易与普通按钮混淆，让人误以为按下它
会触发某个动作。

152 第 6 章 用户体验

඀ࠡ JOEC