是：before伪元素允许输入[type = checkbox]？ [英] Is the :before pseudo-element allowed on an input[type=checkbox]?

问题描述

此StackOverflow答案介绍了如何使用CSS3对复选框进行样式设置，而不需要使用< label> ：

This StackOverflow answer describes how to style checkboxes using CSS3 without requiring a <label>:

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

Fiddle

这适用于Chrome 22，但不适用于Firefox 15或IE 9。

This works in Chrome 22 but not in Firefox 15 or IE 9.

推荐答案

这是未知的土地;规格不清楚的东西。 CSS 2.1规范说明：注意。本规范没有完全定义：被替换的元素（例如HTML中的IMG）之前和之后的交互。这将在未来规范中更详细地定义。可以说，INPUT可以看作是一个在CSS 2.1意义上替换元素。

This is uncharted land; the specifications do not clear things up. The CSS 2.1 spec says: "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.

可能会认为这些伪元素不能用于不能包含任何内容的元素（即，具有EMPTY已声明内容），例如IMG或INPUT。但是，措词提到IMG和附录D 有一个规则，选择器 br：before 。

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 D has a rule with the selector br:before.

CSS3选择器是CSS3中已达到推荐状态的少数部分之一， em>不是清除的东西。 它说：:: before和:: after伪元素可以用于在元素的内容之前或之后描述生成的内容。它们在CSS 2.1 [CSS21]中解释。

And CSS3 Selectors, one of the few parts of CSS3 that have reached recommendation status, does not clear things up. It says: "The ::before and ::after pseudo-elements can be used to describe generated content before or after an element's content. They are explained in CSS 2.1 [CSS21]."

这篇关于是：before伪元素允许输入[type = checkbox]？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！