Custom Checkboxes Failing on Firefox

Question

I'm trying to make custom checkboxes with CSS3, which is working great on Chrome. On Firefox... not so much.

Edit: it seems to be working fine on Firefox 37.

The answer below is still relevant, but the style related issues from mid 2013 are resolved.

IE support isn't mentioned here but edits/answers regarding it are welcome.

demo

The HTML:

<input type="checkbox" id="first"/>
<label for="first">This is pretty awesome</label>

The CSS:

input[type=checkbox] {
  appearance: none;
  background: transparent;
  position: relative;
}
input[type=checkbox]::after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  text-align: center;
  background: #aaa;
  display: block;
  pointer-events: none;
  opacity: 1;
  color: black;
  border: 3px solid black;
}
input[type=checkbox] + label {
  line-height: 48px;
  margin: 0 15px 0 15px;
}
input[type=checkbox]:hover::after {
  content: '';
  background: #32cd32;
  opacity: .3;
}
input[type=checkbox]:checked::after {
  content: '\2713';
  background: #32cd32;
}
input[type=checkbox]:checked:hover::after {
  opacity: 1;
}
input[type=checkbox],
input[type=checkbox]::after {
  width: 48px;
  height: 48px;
  font-size: 46px;
  line-height: 48px;
  vertical-align: middle;
  border-radius: 50%;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

_{Note: I removed vendor prefixes, and things like user-select for brevity. The full code is in the pen.}

What do I need to change to have it look the same on Firefox as it does on Chrome?

Desired:

chrome desired look

Not desired:

firefox bad look

it's impossible with pure CSS. url: http://stackoverflow.com/questions/2587669/css-after-pseudo-element-on-input-field — Vipul Vaghasiya, Aug 23 '13 at 11:40
other mozilla link: http://forums.mozillazine.org/viewtopic.php?f=25&t=291007 — Vipul Vaghasiya, Aug 23 '13 at 11:47
Sorry, I fixed the picture. So the after text *is* showing up on Firefox, but it's not showing the border-radius or box-shadow. I'd even be willing to hide the checkbox somehow. I'm trying to hide the checkbox, and make the `::after` a `::before` of the label. — Brigand, Aug 23 '13 at 11:55

score 15 · Answer 1 · answered Oct 21 '19 at 05:31

15

You can enable custom styles for checkbox specifically for mozilla browser by adding this property and it worked for me.

-moz-appearance:initial

answered Oct 21 '19 at 05:31

Meet Zaveri

2,921
1
22
33

1

You, Sir, is a hero. Worked as expected. – beatcoder Dec 18 '19 at 02:16

score 9 · Accepted Answer · answered Aug 23 '13 at 12:04

9

I managed to fix it as much as seems possible (I'd still love a better solution, if one exists). I switched all of the selectors from

input[type=checkbox]::after

to

input[type=checkbox] + label::after

Downside:

requires a label

But:

HTML requires input elements to have a label

Conclusion:

only bad for invalid HTML

answered Aug 23 '13 at 12:04

Brigand

84,529
20
165
173

I'm having this exact same issue. Did you ever find another way not requiring a label? – lightswitch05 Jan 25 '14 at 00:37
1

Nope, the only other solutions require JavaScript to mimic the functionality of a label. – Brigand Jan 25 '14 at 00:47

score 2 · Answer 3 · answered Apr 18 '16 at 04:24

doesnt technically need a LABEL, but does need control over the mark up to ensure there is a target-able sibling immediately after the checkbox.

i.e.

input[type=checkbox] + span::after{
  display:block;
  width:50px;
  height:50px;
  background:yellow;
  display:block;

}

input[type=checkbox]:checked + span::after{
  display:block;
  width:50px;
  height:50px;
  background:yellow;
  display:block;

}

    <input type="checkbox"></input>
    <span class="targetMe"></span>

target the span using the sibling selector and :after elements as above.

Might as well put in a label tho at this point... :P

score 2 · Answer 4 · answered Nov 01 '16 at 18:46

The problem is that :after and ::after technically create an element as the last child of the element the pseudoselector is applied to. Firefox doesn't like to create children inside of its checkboxes. This is actually part of a bigger topic which is replaced elements.

You will see the same issue with the :before and ::before pseudoelements not working on checkboxes because they would create elements as a first child element within the element being selected.

Custom Checkboxes Failing on Firefox

Edit: it seems to be working fine on Firefox 37.

demo

4 Answers4

Linked

Related