Custom Checkboxes Failing on Firefox

Custom Checkboxes Failing on Firefox

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

Custom checkbox don't work on Firefox

In firefox, ::before or ::after wont work on input. You need to work with the label instead of the input.

Lets work with these-

input.custom-checkbox + label::before
input.custom-checkbox:checked + label::after

Thanks

Custom checkbox with CSS ::before - not working in Firefox/Edge

Sometimes with labels you can solve this type of problems

input[type="checkbox"] {  display: none;}
span {  visibility: visible;  content: "";  display: block;  width: 1.1em;  height: 1.1em;  color: #eddc23;  border: 1px solid #eddc23;  background-color: #540123;  border-radius: 35%;  line-height: 1.27;  text-align: center;  cursor: pointer;}
input[type="checkbox"]:checked + label span::before {  content: "\2713";}

<input type="checkbox" id="checkbox"><label for="checkbox">  <span></span></label>

Checkbox not styled in Firefox but Chrome fine

This is a known bug in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=605985

UPDATE: I found this: Custom CSS3 Checkbox doesn't work on Firefox or IE

CSS - difficulty with custom check boxes between IE and Firefox

Old browsers unfortunately aren't able to style radio buttons. What you should do is to use a plugin like http://fronteed.com/iCheck/ which automatically creates div based checkboxes that you can style on your own and clicking on those sync with the actual checkboxes.

Custom checkbox Working in Chrome and Safari but not Firefox and IE

Pseudo elements are only working for container elements. Therefore I changed the customized checkbox to a label. Instead of the customized checkbox I just following code

CSS: Custom Icon

#checkicons .icon{
    max-width: 90px;
    font-family: Flaticon;
  font-size:50px;
  margin-left: -36px;
  padding: 5px 15px 5px 15px;
  border-radius: 8px;
  line-height: 1.4;
    color: #1e6e11;
  border: solid black;
  background-color: white;
  border-width: 1px;
}

New HTML

<input type="checkbox" id="housecare" name="housecare" onchange="toggleDiv(this); toggleIcon('houseCareIcon')">
    <label for="housecare" id="houseCareIcon" name="houseCareIcon" class="flaticon-leisure4 icon"></label>
    <label for="housecare">House Care</label>
</input>

The color handling whether the label should look like checked or not checked is now done with JavaScript.

Javascript: Check Color Handling

function toggleIcon(obj, checkobj){
    if(document.getElementById(checkobj.id).checked){
        document.getElementById(obj).style.color='white';
        document.getElementById(obj).style.backgroundColor='#1e6e11';
    }else{
        document.getElementById(obj).style.color='#1e6e11';
        document.getElementById(obj).style.backgroundColor='white';
    }
}

Thanks Hidden Hobbes for the "inspiration"!

Icon is not displaying on check-box in Mozilla Firefox

:before and :after is not available on elements that cannot have content. <input type="checkbox" /> is one of those.

Others:

• <input type="radio" />
• <input type="text/date/email/number/whathaveyou" />
• <br />
• <hr />

In this or that browser, this or that element may allow for pseudo elements being rendered. I personally wouldn't want to rely on that, though, as it appears that this is non-standards behaviour which may be removed any time in the future.

To solve your problem, hide your checkbox, wrap everything ain a label and go with :checked pseudo class and adjacent sibling selector + to put your "icon" on your b:before.

https://jsfiddle.net/1jj1714e/1/

---

Related Topics