Firefox中自定义flipswitch按钮显示异常，Chrome正常求助

我之前也碰到过类似的Firefox和Chrome自定义表单控件样式不兼容的坑，核心原因是Firefox对appearance属性的处理和Chrome不一样，而且:indeterminate伪类的渲染优先级也有差异。下面是我验证过的可行方案：

问题根源 #

• Firefox不支持-webkit-appearance: initial，这个属性是WebKit内核专属的，Firefox需要用appearance: none来完全重置原生checkbox的样式。
• Firefox对:indeterminate伪类的伪元素样式优先级处理和Chrome不同，导致状态切换时样式不能正确覆盖。

修改后的完整代码 #

HTML（无需修改） #

<!--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>

CSS（关键修改点已标注） #

body { 
  font-family:arial; 
} 

.flipswitch { 
  position: relative; 
  background: white; 
  width: 120px; 
  height: 40px; 
  /* 替换-webkit-appearance: initial，改用跨浏览器的外观重置 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  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: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; 
  /* 给所有状态加上过渡，包括从indeterminate切换 */
  transition: all 0.3s ease-in 0s;
}

.flipswitch:indeterminate:after { 
  left:30%; 
  content:"???"; 
  background:grey; 
} 

.flipswitch:not(:indeterminate):not(:checked):after { 
  left:2%; 
  content: "OFF"; 
  background:#f00; 
} 

.flipswitch:not(:indeterminate):checked:after { 
  left:53%; 
  content: "ON"; 
  background:#0f0; 
}

JS（无需修改） #

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

关键修改说明 #

1. 外观重置：用appearance: none（带前缀）替代-webkit-appearance: initial，让Firefox能完全移除原生checkbox的默认样式，和Chrome保持一致的基础状态。
2. 统一伪元素样式：把所有状态共有的after样式抽出来，避免重复，同时确保过渡效果在所有状态切换时都生效。
3. 明确状态选择器：把flipswitch:not(:indeterminate):after拆分成flipswitch:not(:indeterminate):not(:checked):after，让unchecked状态的样式优先级更明确，避免被其他状态覆盖。

这样修改后，Firefox里的flipswitch就能和Chrome显示一致了，三种状态（不确定、关闭、开启）的切换动画也能正常工作。

内容的提问来源于stack exchange，提问作者Lewis Clarke