accent-color 是 CSS 原生属性，用于统一设置 checkbox、radio、range thumb 和 progress 前景色；不作用于 select、button 等元素，且不继承、不兼容 -webkit-appearance: none。
accent-color 是什么，它能改哪些控件
accent-color 是 CSS 原生支持的属性，用于统一设置表单控件的主色调（比如选中状态、滑块 thumb、复选框勾选色等）。它不是万能染色剂——只对部分原生控件生效，且依赖浏览器实现。
目前稳定支持的控件包括：input[type="checkbox"]、input[type="radio"]、input[type="range"]（仅 thumb）、progress 元素的进度条前景色。不作用于 select、button、input[type="text"] 等其他表单元素。
常见错误现象：给整个 form 设置 accent-color 后，下拉框或输入框颜色没变——这正常，不是你写错了，是它本来就不管这些。
怎么用才生效，兼容性要注意什么
直接在目标元素上设 accent-color 即可，支持所有标准颜色值：accent-color: #007bff、accent-color: var(--primary)、accent-color: rebeccapurple。
立即学习“前端免费学习笔记（深入）”；
关键点在于：它必须作用于“控件本身”，不能靠继承（比如父容器设了，子控件不自动继承）；也不能被更具体的规则覆盖（比如 input[type="checkbox"]::before 伪元素里写了 background，就会盖掉 accent-color 的效果）。
兼容性方面：
- Chrome 93+、Edge 93+、Firefox 111+（需开启
layout.css.accent-color.enabled标志，默认已启用） - Safari 15.4+（macOS）和 Safari iOS 15.4+ 支持，但
progress在旧版 Safari 中表现不一致 - 不支持 IE，也不支持 Android WebView 旧版本（如 Chrome 89 以下）
和 -webkit-appearance: none 混用会出问题
一旦给控件加了 -webkit-appearance: none（比如想自定义 checkbox 样式），accent-color 就基本失效——因为浏览器放弃了原生渲染逻辑，不再识别这个语义化的颜色控制指令。
这时候要么放弃 accent-color，改用 ::before/::after 手动绘制；要么保留原生外观，只通过 accent-color 微调颜色，不碰 appearance。
典型踩坑场景：
- 用了 Tailwind 的
appearance-none类，又指望accent-color生效 → 不会 - 在全局重置样式里写了
input { -webkit-appearance: none }→ 所有原生控件的accent-color都挂了 - 想同时自定义形状 + 用
accent-color控制颜色 → 目前做不到，二者互斥
颜色值变化时的性能与响应式行为
accent-color 是可动画的属性（CSS Transitions 支持），但实际动画效果有限：只有部分浏览器对 input[type="checkbox"] 的勾选/取消过程做了平滑过渡，range thumb 移动时一般不触发重绘动画。
响应式切换颜色没问题，比如媒体查询中换值：@media (prefers-color-scheme: dark) { input { accent-color: #6c5ce7; } }，但注意别在频繁触发的交互中反复 setStyle，避免不必要的样式计算。
容易被忽略的一点：它不参与 CSS 颜色函数计算，比如 accent-color: color-mix(in srgb, var(--primary), white 20%) 在当前所有浏览器中都不被支持——只能传基础颜色值或变量。
