accent-color仅对input[type="checkbox"]、input[type="radio"]、input[type="range"]（已填充轨道）和progress（已完成部分）四类原生控件生效，专染其强调区；select、textarea等不支持，且需保留原生渲染、禁用appearance:none、避免transparent/currentcolor值。
直接在 :root 里写 accent-color 就能全局生效，但只对 input[type="checkbox"]、input[type="radio"]、input[type="range"] 和 progress 四类控件起作用——其他表单元素（比如 select、textarea）加了也白加。
哪些控件真正响应 accent-color？
它不是“所有表单控件染色开关”，而是专为原生渲染中存在「强调区」的控件设计：
-
input[type="checkbox"]：勾选标记（✓）和选中背景 -
input[type="radio"]：圆点标记 -
input[type="range"]：已填充轨道部分（不包括::thumb） -
progress：已完成进度条部分（未完成轨道不受影响）
以下控件写了 accent-color 也无效：input[type="text"]、textarea、select、file、button。它们得靠 border、background、color 手动覆盖。
为什么写了 accent-color 却没变色？
最常见原因不是语法错，而是破坏了生效前提：
立即学习“前端免费学习笔记（深入）”；
- 写了
appearance: none或-webkit-appearance: none→ 原生结构被移除，强调区消失 - 父级或自身用了
!important覆盖，或者 JS 动态重置了样式 - 在
label、form或外层容器上设accent-color→ 必须直接作用于控件本身 - 值用了
transparent或currentcolor→ Chrome 会忽略，Firefox 控制台报 warning - 没配
<meta name="color-scheme" content="light dark">→ Safari/Chrome 在深色模式下可能降级用系统色
怎么安全高效地批量设置？
推荐两种方式，避免漏写或冲突：
- 全局统一：
:root { accent-color: #2196F3; }—— 利用继承性，所有子树中支持的控件自动染色（注意：是继承，不是“作用于子元素”，所以仍需控件自身支持） - 精准匹配：
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--primary); }—— 显式限定范围，不依赖继承，更可控
别指望一个 accent-color 包圆全部视觉：range 的 ::thumb、progress 的未完成轨道、复选框的 indeterminate 状态，都得单独处理。后者甚至纯 CSS 无解，必须用 JS 补位。
