Button not displaying properly in firefox

Question

So I've got this button, and it looks just fine in Chrome, but load it in Firefox and it's TOTALLY different. I've tried adding prefixes and it doesn't seem to change anything.

var checkbox = document.getElementById("cb4");
checkbox.indeterminate = true;

body
{
    font-family:arial;
}
.flipswitch
{
    position: relative;
    background: white;
    width: 120px;
    height: 40px;
    -webkit-appearance: initial;
    border-radius: 3px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    outline:none;
    font-size: 14px;
    font-family: Trebuchet, Arial, sans-serif;
    font-weight: bold;
    cursor:pointer;
    border:1px solid #ddd;
}
.flipswitch:indeterminate:after
{
    position:absolute;
    top:5%;
    display:block; 
    line-height:32px;
    width:45%;
    height:90%;
    box-sizing:border-box;
    text-align:center;
    color:black;
    border:#888 1px solid;
    border-radius:3px;
}
.flipswitch:not(:indeterminate):after
{
    position:absolute;
    top:5%;
    display:block; 
    line-height:32px;
    width:45%;
    height:90%;
    box-sizing:border-box;
    text-align:center;
    transition: all 0.3s ease-in 0s; 
    color:black;
    border:#888 1px solid;
    border-radius:3px;
}
.flipswitch:indeterminate:after
{
  left:30%;
  content:"???";
  background:grey;
}
.flipswitch:not(:indeterminate):after
{
    left:2%;
    content: "OFF";
    background:#f00;
}
.flipswitch:not(:indeterminate):checked:after
{
    left:53%;
    content: "ON";  
    background:#0f0;
}

      
                   <!--Marketing Emails -->
        <div class="form-row">
              <h4>Do you wish to receive Marketing Emails</h4>
              <p>Emails reminding you to keep your account updated, and to continue your job search with redacted</p>
                 <div>
                    <input type="checkbox" id="cb4" class="flipswitch" name="marketing"/>
                     &nbsp;<span></span>
                 </div>
              
            
            
            </div>

It is meant to display as it does in Chrome.

Any advice would be appreciated - if I find anything new I'll make an edit.

Cheers all.

Answer 1

You just need to add the -moz-appearance: initial; for Firefox.

var checkbox = document.getElementById("cb4");
checkbox.indeterminate = true;

body
{
    font-family:arial;
}
.flipswitch
{
    position: relative;
    background: white;
    width: 120px;
    height: 40px;
    -webkit-appearance: initial;
    -moz-appearance: initial;
    border-radius: 3px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    outline:none;
    font-size: 14px;
    font-family: Trebuchet, Arial, sans-serif;
    font-weight: bold;
    cursor:pointer;
    border:1px solid #ddd;
}
.flipswitch:indeterminate:after
{
    position:absolute;
    top:5%;
    display:block; 
    line-height:32px;
    width:45%;
    height:90%;
    box-sizing:border-box;
    text-align:center;
    color:black;
    border:#888 1px solid;
    border-radius:3px;
}
.flipswitch:not(:indeterminate):after
{
    position:absolute;
    top:5%;
    display:block; 
    line-height:32px;
    width:45%;
    height:90%;
    box-sizing:border-box;
    text-align:center;
    transition: all 0.3s ease-in 0s; 
    color:black;
    border:#888 1px solid;
    border-radius:3px;
}
.flipswitch:indeterminate:after
{
  left:30%;
  content:"???";
  background:grey;
}
.flipswitch:not(:indeterminate):after
{
    left:2%;
    content: "OFF";
    background:#f00;
}
.flipswitch:not(:indeterminate):checked:after
{
    left:53%;
    content: "ON";  
    background:#0f0;
}

      
                   <!--Marketing Emails -->
        <div class="form-row">
              <h4>Do you wish to receive Marketing Emails</h4>
              <p>Emails reminding you to keep your account updated, and to continue your job search with redacted</p>
                 <div>
                    <input type="checkbox" id="cb4" class="flipswitch" name="marketing"/>
                     &nbsp;<span></span>
                 </div>
              
            
            
            </div>