CODEWITHSUNDEEP
cssfirefoxcheckbox
Brigand
Brigand

Reputation: 86270

Custom Checkboxes Failing on Firefox

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

Upvotes: 19

Views: 17518

Answers (4)

Meet Zaveri
Meet Zaveri

Reputation: 3059

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

-moz-appearance:initial

Upvotes: 16

Alex W
Alex W

Reputation: 38253

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.

Upvotes: 2

Fivebears
Fivebears

Reputation: 129

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

Upvotes: 2

Brigand
Brigand

Reputation: 86270

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

Upvotes: 9

Related Questions