16

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?

Community
  • 1
  • 1
Michael Liu
  • 52,147
  • 13
  • 117
  • 150

4 Answers4

18

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

TylerH
  • 20,799
  • 66
  • 75
  • 101
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • Pseudo-element definitions have been moved to other modules, leaving Selectors to define only the syntax and give a brief summary of the CSS1 and CSS2 pseudo-elements. Hopefully, they'll clarify this for `::before` and `::after` in the relevant module (possibly the fabled rewrite of the Generated/Replaced Content Level 3 module). – BoltClock Oct 11 '12 at 10:12
8

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.

jamesplease
  • 12,547
  • 6
  • 47
  • 73
  • 1
    Avoid linking to working drafts of specs that have already become recommendations, unless you're specifically referencing a draft: http://www.w3.org/TR/CSS21/generate.html – BoltClock Oct 11 '12 at 07:01
  • @BoltClock Good call. Sorry about that. – jamesplease Oct 11 '12 at 15:00
  • It seems like it is implemented in Safari too as of 2022, and works properly. The (fresher answers below)[https://stackoverflow.com/a/68634226/5125537] also indicate this. Regarding whether it is valid or not, is this answer still accurate? And if yes, then in what way will I experience the disadvantages of using `:before` and/or `:after` on my input invalidly? – Norbert Biró Nov 04 '22 at 13:32
2

Yeah, it's possible & cross-browser!

[type=checkbox] {
  appearance: none;
  -webkit-appearance: none; /* Safari */
}

[type=checkbox]::before {
  content: 'a text before';
}
Lcf.vs
  • 1,792
  • 1
  • 11
  • 15
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.

Nensi Kasundra
  • 1,980
  • 6
  • 21
  • 34
Revanth
  • 11
  • 3