React JS：如何修改复选框选中状态下的颜色？

原生复选框的默认样式难以直接修改，你可以通过以下几种方式实现选中状态改为红色：

方法一：自定义样式覆盖（兼容多数浏览器） #

给复选框添加类名，通过CSS伪元素模拟自定义选中样式：

React代码 #

<input
  type="checkbox"
  className="custom-checkbox"
  disabled={isDisabled}
  defaultChecked={checked}
  onChange={() => setChecked(!checked)}
/>

CSS样式 #

/* 隐藏原生复选框，自定义基础样式 */
.custom-checkbox {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
}

/* 选中状态的红色背景与边框 */
.custom-checkbox:checked {
  background-color: red;
  border-color: red;
}

/* 添加白色对勾（可选，增强视觉识别） */
.custom-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 禁用状态样式（可选，保持视觉一致性） */
.custom-checkbox:disabled {
  background-color: #eee;
  border-color: #ddd;
  cursor: not-allowed;
}

方法二：利用CSS变量（现代浏览器简洁方案） #

如果目标浏览器支持accent-color属性（Chrome 93+、Firefox 92+、Safari 15.4+），可以直接设置：

CSS样式 #

.custom-checkbox {
  accent-color: red;
}

React代码 #

只需给input添加className="custom-checkbox"即可，这种方式代码更简洁，但会同时修改复选框的选中背景色和边框色，无法单独控制单个属性。

注意事项 #

• 自定义伪元素的方式灵活性更高，可调整对勾颜色、边框圆角等细节；
• 若使用accent-color，需确认目标浏览器的兼容性；
• 记得适配禁用状态的样式，避免交互逻辑与视觉表现不一致。

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