Question

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

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

Given the lack of support in the latter two browsers, is Chrome’s behavior valid according to the CSS3 specification?

Answer 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.

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.

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].”