Page 181 - css揭秘

1①
不幸的是，复选框和单选框 不在此列。直到今天，这两种控件在绝大
多数浏览器中仍然是几乎或完全无法设置样式的。这最终导致网页开发者接
受默认样式，或者求助于一些糟糕透顶、可访问性极差的 hack 方案，比如
用 div 和 JavaScript 来模拟这两种控件。

有没有一种方法，既可以克服这些限制、自由定制复选框的外观，同时
又可以摆脱臃肿的代码、保全结构层的语义和可访问性呢？

解决方案

几年前，这个任务还无法在脱离脚本的情况下完成。不过，在选择
小提示
符（第三版）（http://w3.org/TR/css3-selectors）中，我们得到了一个新的伪
你是否还在为伪类选择 类 :checked。这个伪类只在复选框被勾选时才会匹配，不论这个勾选状态
符 :checked 和属性选择符
[checked] 之间的区别感到疑 是由用户交互触发，还是由脚本触发。
惑？后者是不会根据用户的交互 如果直接对复选框设置样式，那么这个伪类并不实用，因为（前面已经
行为进行更新的，因为用户的交
互并不会影响到 HTML 标签上的 交待过了）没有多少样式能够对复选框起作用。不过，我们倒是可以基于复
属性。 选框的勾选状态借助组合选择符来给其他元素设置样式。

你可能还没明白，要根据复选框的勾选状态来给哪个元素设置样式？其
实有一个元素总是跟复选框形影不离、息息相关，它就是 <label>（标签元
素）。当 <label> 元素与复选框关联之后，也可以起到触发开关的作用。

2②
由于 label 不是复选框那样的替换元素 ，我们可以为它添加生成性内
容（伪元素），并基于复选框的状态来为其设置样式。然后，就可以把真正
的复选框隐藏起来（但不能把它从 tab 键切换焦点的队列中完全删除），再
把生成性内容美化一番，用来顶替原来的复选框！
3③
让我们来亲手试一试。先从下面这段简单的结构代码开始 ：
HTML
<input type="checkbox" id="awesome" />
<label for="awesome">Awesome!</label>

接下来需要生成一个伪元素，作为美化版的复选框。我们先给这个伪元
4④
素加上一些基本的样式 ：

① 为易于理解，我们在本篇攻略中统一使用“复选框”这个词。实际上，除非特别注明，本节
讨论的所有内容都是同时适用于复选框和单选框的。
② 据 CSS 2.1 规范所述：“替换元素的特征在于，其内容超出了 CSS 格式化模型的范畴，比如
图片、嵌入的文档或小应用程序等。”原则上我们无法为替换元素添加生成性内容，尽管某
些浏览器可能会允许这样做。
③ 把复选框嵌套进 label 中同样可以为两者建立关联，还可以省掉 ID 属性。但这样一来，我
们就无法基于复选框的状态来设置 label 的样式了，因为现在还不存在父元素选择符。
④ 在这些例子中，我们给复选框添加的样式是相当简单的，但实际的可能性是无穷无尽的。你
甚至可以完全跳过 CSS 美化这一招，直接将图片设置为复选框的各种状态！

150 第 6 章 用户体验

඀ࠡ JOEC