Is the :before pseudo-element allowed on an input[type=checkbox]?

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

Solution 2:

I think that Chrome's behavior is invalid. If you take a look here, it says the ::before and ::after pseudo elements add new content before 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>.

If all of this is true, then it would seem that Chrome's behavior is invalid, whereas IE and Firefox are correct.