Bootstrap复选框安卓火狐选中为绿色其余环境为蓝色如何解决

• 类名误用是核心诱因：Bootstrap 4.x 中form-control类仅为文本输入框、下拉框、文本域设计，复选框、单选框的官方适配类为form-check-input（原生风格）或custom-control-input（自定义美化风格）。在复选框上错误添加form-control类后，不同浏览器对表单控件原生样式的解析优先级存在差异，直接导致样式不一致。
• 安卓端Firefox的表单渲染逻辑特殊：其余浏览器会做容错处理，让复选框继承form-control定义的蓝色主色选中态，但安卓Firefox对原生复选框的用户代理样式优先级更高，不会自动继承文本输入框的颜色规则，因此出现选中态颜色异常。

方案1：采用官方标准结构（推荐，无兼容问题） #

直接替换为Bootstrap 4官方复选框结构，无需额外写flex布局，自动适配全端浏览器样式：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<div class="row">
  <div class="col-12 col-md-12">
    <div class="form-group mb-5">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" name="termsCheckbox" id="termsCheckbox">
        <label class="form-check-label" for="termsCheckbox">
          I have read terms and conditions
        </label>
      </div>
    </div>
  </div>
</div>

方案2：保留现有自定义布局 #

如果需要保留自定义的form-control-check-container弹性布局，做两处修改即可：

1. 移除复选框上的form-control类，避免错误样式继承
2. 补充兼容安卓Firefox的选中态颜色规则

修改后的自定义CSS：

.form-control-check-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.form-control-check {
  accent-color: #007bff; /* Bootstrap 4 默认primary蓝色，兼容所有现代浏览器包括安卓Firefox */
}

/* 兼容不支持accent-color的老旧版本浏览器 */
.form-control-check:checked {
  background-color: #007bff;
  border-color: #007bff;
}

@media (max-width: 767px) {
  .form-control-check {
    /* 移动端自定义尺寸、偏移样式可写在这里 */
  }
}

对应复选框HTML修改为：

<input type="checkbox" class="form-control-check" name="termsCheckbox" id="termsCheckbox">

提示：Bootstrap 4 官方文档明确说明form-control类不适用于复选框、单选框这类选择型控件，这类跨浏览器样式异常绝大多数都是类名误用导致的。

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