为何复选框默认未选中状态background-color不生效，选中状态却正常？

问题重现 #

用户提供的SCSS代码如下：

.checkbox__container { 
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 8px;

  & input[type="checkbox"] { 
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    accent-color: red;
    background-color: red;
    border: 1px solid #575352;
    border-radius: 1px;
    flex: none;
    order: 0;
    flex-grow: 0;

    &:hover { 
      background-color: red; 
      accent-color: red;
      border: 1px solid #575352;
      border-radius: 1px;
      flex: none;
      order: 0;
      flex-grow: 0;
    }

    &:checked { 
      accent-color: #0A8276;
      border-radius: 1px;
      flex: none;
      order: 0;
      flex-grow: 0;

      &:hover { 
        accent-color: #08665C;
        border-radius: 1px;
        flex: none;
        order: 0;
        flex-grow: 0;
      }
    }
  }
}

现象：复选框默认未选中状态和hover时的background-color不生效，但选中及选中hover状态的样式正常显示。

原因分析 #

原生<input type="checkbox">的外观由浏览器内置的UI组件渲染，未选中状态下，浏览器会用自身的默认样式（通常是一个空白方框的伪元素）覆盖你设置的background-color。而accent-color属性仅控制选中状态的强调色（比如勾选图标、选中背景），对未选中状态的背景样式没有影响。

简单来说：浏览器限制了直接修改原生复选框未选中状态的背景，因为它的默认UI层级更高。

修复方案 #

要完全控制复选框的所有状态样式，需要先移除浏览器的默认外观，再自定义样式。最常用的方法是使用appearance: none;（加前缀兼容旧浏览器）：

修改后的SCSS代码：

.checkbox__container { 
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 8px;

  & input[type="checkbox"] { 
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    /* 移除浏览器默认外观 */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* 自定义默认样式 */
    background-color: red;
    border: 1px solid #575352;
    border-radius: 1px;
    flex: none;
    order: 0;
    flex-grow: 0;
    /* 为勾选标记定位做准备 */
    position: relative;
    cursor: pointer;

    &:hover { 
      background-color: red; 
      border-color: #575352;
    }

    &:checked { 
      background-color: #0A8276;
      border-color: #0A8276;

      /* 模拟原生勾选标记 */
      &::after {
        content: '✓';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 14px;
        font-weight: bold;
      }

      &:hover { 
        background-color: #08665C;
        border-color: #08665C;
      }
    }
  }
}

补充说明 #

1. appearance: none;会彻底移除浏览器对复选框的默认渲染，让你能完全控制background-color、border等样式。
2. 移除默认外观后，需要自己模拟选中状态的勾选标记（比如用::after伪元素），因为浏览器不再提供默认的勾选图标。
3. 前缀-webkit-appearance和-moz-appearance是为了兼容Chrome、Safari、Firefox等旧版本浏览器。

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