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

Yes, absolutely you can use that pseudo class e.g: let's give the position of

"input[type="checkbox"]" be relative and the position of the

"input[type="checkbox"]:before" be absolute.

TRY THIS, it will work in chrome but not in firefox.

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

Answer 3

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