24

Firefox is not displaying :after and :before but they do show in Chrome.

Firefox & Chrome: enter image description here

Viewing the source directly in Firefox shows the CSS is there: enter image description here

This is happening on multiple elements on the page using :after.

I have tried using both before and after. I have also tried both :: and : variations.

If I use the same CSS in codepen it works: http://codepen.io/anon/pen/XXOZWL

<input type="checkbox" class="mobile_auth" />

.mobile_auth {
    visibility: hidden;
}

.mobile_auth:after {
    background-image: url('https://lh4.googleusercontent.com/-gD_ItALdha8/AAAAAAAAAAI/AAAAAAAAAB4/eEbUyChzCJc/photo.jpg?sz=110');
    content: '';
    height: 33px;
    width: 33px;
    display: block;
    cursor: pointer;
    visibility: visible;
    margin: auto;
    position: relative;
    top: -3px;
    left: 3px;
}

.mobile_auth::after {
    background-image: url('https://lh4.googleusercontent.com/-gD_ItALdha8/AAAAAAAAAAI/AAAAAAAAAB4/eEbUyChzCJc/photo.jpg?sz=110');
    content: '';
    height: 33px;
    width: 33px;
    display: block;
    cursor: pointer;
    visibility: visible;
    margin: auto;
    position: relative;
    top: -3px;
    left: 3px;
}

.mobile_auth:checked:after {
    background-position: right;
}

You can see the page live at: ***.com login with User: demo Pass: demo and click 'config'. Lots of buttons are missing in the latest Firefox.

It's strange because it doesn't show at all. It's not like the element is there and I can't see it. It isn't even showing that it exists in console.

4
  • To solve your problem, wrap your checkboxes in a label and put your pseudo class styles on that.
    – connexo
    Commented Feb 13, 2016 at 10:03
  • The only problem is that I cannot do the CSS checkbox trick and target the parent :after when the child is checked.
    – Jack
    Commented Feb 13, 2016 at 10:09
  • 2
    True. In that case, make the label follow the checkbox in the code and use :checked + label:after selector.
    – connexo
    Commented Feb 13, 2016 at 10:10
  • 2
    No JS necessary here. Give your checkbox an id="checkbox_id" and attach the label to it using <label for="checkbox_id">.
    – connexo
    Commented Feb 13, 2016 at 10:29

2 Answers 2

37

The expected behavior can be enabled for Firefox browsers by using the following on the input[type=checkbox]:

input[type=checkbox] {
  -moz-appearance:initial // Hack for Firefox Browsers
}

This option allows you to use :before pseudo-elements on the input-element, just like it works out of the box for Safari and Chrome and Opera Browsers:

input[type=checkbox]::before { 
    ...
}

The moz-appearance is currently experimental technology. More information along with an overview of Browser compatibility can be obtained here: MDN web docs - appearance.

3
  • Not sure if I would want to rely on this working.
    – connexo
    Commented Apr 4, 2022 at 8:40
  • 2
    The answer still works in 2022 Commented Jun 7, 2022 at 6:14
  • This solution makes no difference (i.e., it still does not work) for input[type="range"] in Firefox, though.
    – Otto G
    Commented May 2 at 13:55
28

You cannot use ::after and ::before on elements that cannot have content, such as <input /> or <img />.

::after and ::before work like this:

<element>
  ::before
  ***content***
  ::after
</element>
<next-element>***content***</next-element>

They get inserted before and after the content of a DOM node. Since <input /> cannot have content, there's nowhere to put it.

Now let's check with a checkbox:

<input type="checkbox" />
<next-element>***content***</next-element>

Here, there cannot be ***content*** to surround with pseudo elements.

2
  • 1
    Thank you Connexo. The only thing that I'm still unsure about is the fact that it works on Firefox in the codepen with the same code?
    – Jack
    Commented Feb 13, 2016 at 10:10
  • 8
    A side note. Chrome supports after/before tags on the checkbox. Firefox doesn't.
    – guru
    Commented Jan 5, 2018 at 7:46

Not the answer you're looking for? Browse other questions tagged or ask your own question.