accent-color仅支持checkbox、radio、range和progress四类原生控件的强调色，不继承、不兼容appearance:none，且需Chrome 93+、Firefox 97+、Safari 15.4+；不支持select、button、textarea等控件。
accent-color 是 CSS 原生支持表单控件强调色的属性，无需 JavaScript 或自定义伪元素即可统一修改复选框、单选按钮、滑块轨道点等控件的高亮色。它在现代浏览器中已稳定支持（Chrome 93+、Firefox 97+、Safari 15.4+），但兼容性仍是首要拦路虎。
哪些控件能用 accent-color？
仅作用于原生表单控件中“有明确激活/选中状态”的部分：
-
<input type="checkbox">和<input type="radio">的选中标记（对勾/圆点） -
<input type="range">的滑块 thumb（注意：不是轨道，轨道需另用::track） -
<progress>的进度条填充色（部分浏览器支持，Firefox 当前不支持）
它对 <select>、<button>、<input type="text"> 等无效果——这些仍需传统方式（如 background、border 或伪元素）控制样式。
accent-color 的取值与继承行为
接受任意合法 CSS 颜色值：accent-color: #6366f1、accent-color: hsl(240, 100%, 60%)、accent-color: var(--primary) 都可以。关键点在于它的继承性：
立即学习“前端免费学习笔记（深入）”；
- 默认不继承，但可显式设为
inherit - 推荐在
input、input[type="checkbox"]等选择器上直接设置，避免依赖父级继承出错 - 若同时设置了
color或background-color，accent-color不受影响——它只管“强调色”，不参与常规颜色层叠
示例：
input[type="checkbox"],
input[type="radio"] {
accent-color: #8b5cf6;
}
<p>input[type="range"]::-webkit-slider-thumb {
/<em> 注意：WebKit 下 thumb 本身不响应 accent-color，必须单独设 </em>/
appearance: none;
background-color: #8b5cf6;
}常见失效原因和绕过方案
写完 accent-color 却没变色？大概率是以下情况之一：
- 浏览器版本太低（尤其 Safari @supports 检测或降级样式
- 用了
appearance: none却没补全所有浏览器前缀，导致控件退化为纯 div，accent-color失效 - 在
input[type="range"]上设了accent-color，但期望改变的是轨道而非 thumb——轨道颜色需用::track伪元素 +background - CSS 优先级被更高权重规则覆盖（比如某个框架的全局
input样式），建议用更具体选择器或!important快速验证
兼容性兜底建议：
@supports (accent-color: red) {
input[type="checkbox"] { accent-color: #ec4899; }
}
/* 不支持时 fallback 到 -webkit-appearance + 自定义伪元素 */真正要注意的是：它只改“强调色”，不改尺寸、边框、阴影或交互反馈。想做深度定制（比如圆角复选框、动画选中），还是得回退到 appearance: none + 手动重绘——accent-color 是减负工具，不是万能皮肤引擎。
