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

Question

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

input[type=checkbox]:before {
    cont         


        

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