如何修复CSS checkbox选中状态颜色在不同浏览器不统一

appearance: none仅隐藏原生复选框，无法直接用color或background-color控制选中颜色，因其“勾”由系统渲染；必须配合伪元素（如::before/::after）绘制自定义图标并绑定:checked状态。

如何修复css checkbox选中状态颜色在不同浏览器不统一_使用appearance属性

为什么 `appearance` 不能直接改 checkbox 选中颜色

很多人以为给 input[type="checkbox"] 设置 appearance: none 后，就能像普通元素一样用 color 或 background-color 控制选中态颜色——其实不行。原生 checkbox 的“勾”是操作系统渲染的图形（不是 CSS 绘制的），appearance: none 只是移除默认样式，但不会自动给你一个可着色的勾图标。你得自己画。

必须配合伪元素和自定义图形才能生效

移除默认外观后，要靠 ::before 或 ::after 在 label 或 input 上叠加内容。常见做法是：用 label 包裹 input，隐藏 input，用 label 的伪元素模拟勾选状态。

必须给 input 加 position: absolute; opacity: 0（不能只用 display: none，否则失去可访问性和 :checked 状态）
label 需设 position: relative，方便伪元素定位
在 input:checked + label::before 中用 content: "✓" 或 SVG base64 背景图实现勾图标
颜色控制直接作用于伪元素的 color 或 background-color

input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}
input[type="checkbox"] + label::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #999;
  margin-right: 8px;
}
input[type="checkbox"]:checked + label::before {
  background-color: #007bff;
  border-color: #007bff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

Firefox 下 `appearance: none` 需要前缀且行为更严格

Firefox 直到 v89 才支持无前缀 appearance，旧版本必须写 -moz-appearance: none。更重要的是：Firefox 对未显式设置 border、background 的 appearance: none 元素会 fallback 回原生样式，导致“看似没生效”。