按钮在 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

您只需为 Firefox 添加 -moz-appearance: initial;。

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>

按钮在 Firefox 中无法正确显示

Button not displaying properly in firefox

html

javascript

css

cross-browser