是：在输入[type = checkbox]允许的伪元素之前？

Question

This StackOverflow answer介绍如何使用样式CSS3复选框无需<label>：

input[type=checkbox]:before { 
    content:""; display:inline-block; width:12px; height:12px; background:red; 
} 

Fiddle

此作品在Chrome 22，但不能在Firefox 15或IE 9

由于缺乏支持在后两款浏览器中，是Chrome的行为根据CSS3规范是否有效？

Answer 1

这是未知的土地;规范并没有把事情搞清楚。 CSS 2.1 spec says：“注意。本规范没有完全定义：before和after之后的替换元素（如HTML中的IMG）的交互。这将在未来的规范中更详细地定义。“并且，有争议的是，INPUT可以被看作是replaced element in CSS 2.1 sense。

有人可能会认为这些伪元素不能用于不能有任何内容的元素（即，用EMPTY声明的内容），如IMG或INPUT。然而，措辞提到IMG，并且Appendix D有一个规则与选择器br:before。

而CSS3选择器是CSS3中已经达到推荐状态的少数几个部分之一，不是清除了一些东西。 It says：“:: before和:: after伪元素可用于描述元素内容之前或之后的生成内容。它们在CSS 2.1 [CSS21]中进行了解释。“

Answer 2

我认为Chrome的行为是无效的。如果您take a look here，它说::before和::after伪元素在目标元素的content之前或之后添加新的content。输入元素没有content;他们只有一个value。例如，你不能这样做<input>Pasta</input>。

如果所有这些都是真的，那么Chrome的行为似乎无效，而IE和Firefox是正确的。