CSS input[type=checkbox] 上是否允许 :before 伪元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12831620/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is the :before pseudo-element allowed on an input[type=checkbox]?
提问by Michael Liu
This StackOverflow answerdescribes how to style checkboxes using CSS3 without requiring a <label>:
这个 StackOverflow 答案描述了如何使用 CSS3 设置复选框的样式而不需要<label>：
input[type=checkbox]:before {
content:""; display:inline-block; width:12px; height:12px; background:red;
}
This works in Chrome 22 but not in Firefox 15 or IE 9.
这适用于 Chrome 22，但不适用于 Firefox 15 或 IE 9。
Given the lack of support in the latter two browsers, is Chrome's behavior valid according to the CSS3 specification?
鉴于后两种浏览器缺乏支持，根据 CSS3 规范，Chrome 的行为是否有效？
采纳答案by Jukka K. Korpela
This is uncharted land; the specifications do not clear things up. The CSS 2.1 spec says:
这是一片未知的土地；规范没有弄清楚。在CSS 2.1规范说：
“Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.” And, debatably, INPUT could be seen as a replaced element in CSS 2.1 sense.
“笔记。本规范没有完全定义 :before 和 :after 与替换元素（例如 HTML 中的 IMG）的交互。这将在未来的规范中更详细地定义。” 而且，值得商榷的是，INPUT 可以被视为CSS 2.1 意义上的替换元素。
One might think that these pseudo-elements cannot be used for elements that cannot have any content (i.e., with EMPTY declared content), such as IMG or INPUT. However, the wording mentions IMG, and Appendix Dhas a rule with the selector br:before.
人们可能认为这些伪元素不能用于没有任何内容的元素（即具有 EMPTY 声明的内容），例如 IMG 或 INPUT。但是，措辞提到了 IMG，附录 D有一个关于选择器的规则br:before。
And CSS3 Selectors, one of the few parts of CSS3 that have reached recommendation status, does notclear things up. It says:
而 CSS3 选择器，CSS3 中少数几个达到推荐状态的部分之一，并没有把事情搞清楚。它说：
“The
::beforeand::afterpseudo-elements can be used to describe generated content before or after an element's content. They are explained in CSS 2.1 [CSS21].”
“
::before和::after伪元素可用于描述在元素内容之前或之后生成的内容。它们在 CSS 2.1 [CSS21] 中有解释。”
回答by jamesplease
I think that Chrome's behavior is invalid. If you take a look here, it says the ::beforeand ::afterpseudo elements add new contentbefore or after the target element's content. Input elements have no content; they just have a value. You can't, for instance, do <input>Pasta</input>.
我认为 Chrome 的行为是无效的。如果你看看这里，它说::before和::after伪元素content在目标元素的 之前或之后添加新的content。输入元素没有content; 他们只有一个value. 例如，你不能这样做<input>Pasta</input>。
If all of this is true, then it would seem that Chrome's behavior is invalid, whereas IE and Firefox are correct.
如果所有这些都是真的，那么 Chrome 的行为似乎是无效的，而 IE 和 Firefox 是正确的。
