[注解] [603] 自定义复选框

[cssmagic]

花絮与注解

第 150 页 ‧ 脚注 ②

② 据 CSS 2.1 规范所述：“替换元素的特征在于，其内容超出了 CSS 格式化模型的范畴，比如图片、嵌入的文档或小应用程序等。” 原则上我们无法为替换元素添加生成性内容，尽管某些浏览器可能会允许这样做。

WebKit 浏览器允许我们为复选框添加伪元素。虽然 CSS 规范很可能永远也不会支持这种行为，但浏览器擅自增加这种行为也没有破坏规范，因此我估计 WebKit 的这个特性并不会很快发生变化。

因此，从务实的角度出发，我认为这个特性是可以利用的。一旦放开这个禁忌，我们可以实现 “更好的” 自定义复选框（待续）。

第 151 页 ‧ 侧栏警告

在使用宽松的选择符时一定要小心。对于那些后面没有 label 的复选框来说（比如它是被嵌套进一个 label 的），使用 input[type="checkbox"] 选择符也会把它们隐藏起来，从而损害可用性。

在实际项目中，通常不会直接写这么宽松的选择符，因为 input 标签一般不会光秃秃地什么 class 都不加。

比如，在实践中，我们写好的自定义复选框样式通常会抽象出来，以便在网站的各处复用。参照市面上绝大多数样式库的接口风格，我们最终选用的抽象方案往往就是先约定结构，然后把可复用的样式以 class 作为接口暴露出来。

这样一来，原文警告的风险就不存在了，因为我们的工作方式并不是通过选择符来把样式匹配到复选框身上，而是以添加 class 的方式精确地为需要美化的复选框（及其配套的 label ）加样式。