Edge浏览器下checkbox的background-color属性无法生效问题求解

Chromium内核Edge的原生checkbox受浏览器内置UA样式限制，直接设置background-color不会生效，可通过清除默认外观的方式实现全自定义样式，该方案兼容所有正式版Edge，无需额外兼容处理：

• 步骤1：给checkbox元素添加appearance: none属性清除默认样式
• 步骤2：自定义基础样式、选中态样式，以及选中后的对勾标识

完整CSS示例代码如下：

input[type="checkbox"] {
  /* 核心：清除浏览器默认渲染样式 */
  appearance: none;
  -webkit-appearance: none;
  /* 自定义基础尺寸、边框 */
  width: 16px;
  height: 16px;
  border: 1px solid #ccc; /* 可替换为你需要的边框颜色 */
  border-radius: 2px;
  /* 自定义未选中状态背景色 */
  background-color: #e8f4ff; /* 可替换为你需要的背景色 */
  cursor: pointer;
  position: relative;
}

/* 选中状态样式 */
input[type="checkbox"]:checked {
  background-color: #2563eb; /* 可替换为你需要的选中态背景色 */
  border-color: #2563eb;
}

/* 选中后对勾样式，可按需调整大小、位置 */
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

如果仅需要修改选中状态的主题色，不需要修改未选中背景，可直接使用accent-color属性，代码更简洁：

input[type="checkbox"] {
  accent-color: #2563eb; /* 直接修改选中后的主题色 */
}

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