如何修改checkbox、slider、radio button、select组件的强调色？

最便捷的实现方式是直接使用CSS原生accent-color属性，该属性已被Chrome 93+、Firefox 92+、Safari 15.4+等所有主流现代浏览器支持，无需重写组件默认样式即可快速生效。

基础使用方法 #

你可以全局统一设置，也可以针对指定组件单独设置：

/* 全局所有支持的表单元素生效 */
:root {
  accent-color: #1677ff; /* 替换为你需要的目标强调色 */
}

/* 仅针对目标组件设置 */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
select {
  accent-color: #1677ff;
}

该属性会自动适配组件的选中、悬停、禁用等不同状态，同时自动满足对比度可访问性要求，无需额外调整状态样式。

旧浏览器兼容方案 #

如果需要兼容Safari 15.4以下的老旧浏览器版本，可通过重写默认样式实现：

• 首先给目标组件添加appearance: none清除浏览器默认样式
• Checkbox/Radio：自定义设置边框、圆角，选中态的背景色和图标样式
• Slider（input[type="range"]）：通过::-webkit-slider-thumb、::-moz-range-thumb、::-ms-thumb等私有伪类分别修改滑块颜色，通过::-webkit-slider-runnable-track等伪类修改轨道颜色
• Select：清除默认下拉箭头后自定义背景箭头，设置边框、选中态背景色即可

如果你使用了Element UI、Ant Design等第三方UI组件库，优先使用组件库官方提供的主题色全局配置项修改，效率更高且不会出现样式冲突。

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