Кнопка не отображается должным образом в Firefox

Question

Итак, у меня есть эта кнопка, и она отлично выглядит в Chrome, но загрузите ее в 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;
    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>

Отображается так же, как в Chrome.

Буду признателен за любой совет - если я найду что-то новое, я внесу изменения.

Приветствует всех.

Answer 1

Вам просто нужно добавить -moz-appearance: initial; для 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>