Firefox checkbox style issue

Question

I am trying to correct the styling of some custom styled checkboxes I have created. They look great in all browsers apart from FireFox? I have replicated the issues here: https://jsfiddle.net/y6Lty5nm/ If you open this up in chrome it looks great but in FireFox its almost like its ignoring the styles completely?

 input[type="checkbox"]{
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        background-color: #999999;
        width: 50px;
        height: 50px;
        border-radius: 100px;
        -moz-border-radius:100px;
        transition: all 0.5s;
        cursor: pointer;
    }
    
    input[type="checkbox"]:checked{
        background-color: #19a89d;
    }
    
    input[type="checkbox"]:focus{
        outline: none;
    }
    
    input[type="checkbox"]:hover{
        background-color: #19a89d;
    }

    <li><input type="checkbox" class="chck" data-filter=".sp" id="sp"><p>Super Parent</p></li>
    <li><input type="checkbox" class="chck" data-filter=".cf" id="cf"><p>Control Freak</p></li>
    <li><input type="checkbox" class="chck" data-filter=".fs" id="fd"><p>Food Snob</p></li>
    <li><input type="checkbox" class="chck" data-filter=".bh" id="bh"><p>Bean Head</p></li>
    <li><input type="checkbox" class="chck" data-filter=".bb" id="bb"><p>Busy Bee</p></li>

   

I have looked this up on Google and Stack and have of course seen others wit the same issue, I have tried applying the web kits but it seems to ignore them?

Answer 1

There's multiple records of bugs within firefox specifically for styling checkboxes and radio buttons.

My recommendation is to write your own solution.

label input[type="checkbox"]{ display: none; }

label input[type="checkbox"]:checked + .cr > .cr-icon{
    transform: scale(1) rotateZ(0deg);
    opacity: 1;
}

label input[type="checkbox"] + .cr > .cr-icon{
    transform: scale(3) rotateZ(-20deg);
    opacity: 0;
    transition: all .3s ease-in;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<label>
    <input type="checkbox" value="" checked="">
    <span class="cr"><i class="cr-icon fa fa-check"></i></span>
    Click Me
</label>