在输入[type = checkbox]上是否允许:before伪元素？

Question

此StackOverflow答案描述了如何使用CSS3设置样式复选框,而无需<label>:

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

小提琴

这适用于Chrome 22,但不适用于Firefox 15或IE 9.

鉴于后两种浏览器缺乏支持,Chrome的行为是否符合CSS3规范？

Answer 1

这是未知的土地; 规范不清楚.在CSS 2.1规范说:"注意.此规范未完全定义:替换元素(例如HTML中的IMG)之前和之后的交互.这将在未来的规范中更详细地定义."并且,可以说,INPUT可以被视为CSS 2.1意义上的替换元素.

有人可能会认为这些伪元素不能用于不能包含任何内容的元素(即使用EMPTY声明的内容),例如IMG或INPUT.但是,措辞提到IMG,附录D有选择器的规则br:before.

CSS3选择器是CSS3中已经达到推荐状态的少数几个部分之一,但它并没有解决问题.它说:":: before和:: after伪元素可用于描述元素内容之前或之后生成的内容.它们在CSS 2.1 [CSS21]中进行了解释."

Answer 2

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

如果所有这一切都是真的,那么Chrome的行为似乎无效,而IE和Firefox是正确的.