accent-color仅对checkbox、radio、range和progress四类原生控件的特定高亮区域生效，不作用于边框、背景或非原生控件，且受appearance、color-scheme、透明色及作用范围限制。
accent-color 能快速统一 checkbox、radio、range 和 progress 的强调色，但不是“所有表单控件一键染色”——它只改高亮区，不碰边框、背景或非原生控件。
哪些元素真正响应 accent-color？
只对四类原生控件的特定区域生效，其他加了也无效：
-
input[type="checkbox"]：勾选标记（✓）和选中时的背景色 -
input[type="radio"]：内部圆点填充色 -
input[type="range"]：已填充轨道部分（不包括::thumb） -
progress：已完成进度条部分（不包括 未完成轨道）
以下控件写了 accent-color 完全没反应：input[type="text"]、textarea、select、button、file。它们得靠 border、background、color 单独调。
为什么写了 accent-color: red 却没变色？
失效几乎从不因为语法错，而是破坏了底层前提：
立即学习“前端免费学习笔记（深入）”；
-
appearance: none一开，原生渲染路径就断了，accent-color失去作用对象 - 用
background或mask完全覆盖控件 → 颜色还在，但被遮住了 - 父级或自身设了
color-scheme: light，而系统是暗色模式 → Safari/macOS 可能强制回退到系统色 - 值用了
transparent或currentcolor→ Chrome 直接忽略，Firefox 控制台报 warning - 写在
label或外层容器上 → 必须直接作用于控件本身（accent-color不继承）
调试建议：临时清空所有自定义样式，只留 accent-color，确认是否生效；再逐条加回，定位干扰项。
怎么用 CSS 变量实现主题联动？
绑定到 :root 是最轻量、最可靠的方式：
:root {
--form-accent: #2196F3;
accent-color: var(--form-accent, #007bff);
}
关键点：
- 变量必须在
:root定义，不能只在某个 class 里声明——accent-color本身不继承，但变量会继承 -
var(--form-accent, #007bff)中的 fallback 只在变量未定义时触发，不是“兜底颜色” - 深色模式只需改变量：
@media (prefers-color-scheme: dark) { :root { --form-accent: #60a5fa; } }
indeterminate 状态下 checkbox 必然灰色，这是规范限制，accent-color 无法干预；range 的 ::thumb、progress 的未完成轨道、checkbox 的不确定态，都得额外处理——accent-color 是精准控制开关，不是万能覆盖层。
