accent-color 仅对 checkbox、radio、range 和 progress 四类原生控件的特定区域生效，不支持 text 输入框或 select 边框；需避免 appearance: none、遮盖高亮区及 color-scheme 冲突，并通过 :root 变量实现主题联动。
accent-color 能直接生效，但只对特定控件起作用——别指望它改 input[type="text"] 或 select 的边框色，那得另写样式。
哪些表单元素真正响应 accent-color？
目前稳定支持的只有四类原生控件：
-
input[type="checkbox"]：勾选标记（✓）和选中背景 -
input[type="radio"]：圆点填充色 -
input[type="range"]：已填充轨道部分（不是滑块把手::thumb） -
progress：已完成进度条部分（剩余轨道不染色）
其他如 textarea、input[type="date"]、button 加了也无效。Safari 16.4+、Chrome 93+、Firefox 111+ 才完整支持；旧版 Firefox 对 range 和 progress 支持有限。
为什么写了 accent-color: red 却没变色？
最常见失效原因不是语法错，而是破坏了生效前提：
-
appearance: none显式关闭原生渲染 →accent-color失去作用对象 - 用
background或mask完全覆盖控件 → 高亮区被遮住，颜色还在但不可见 - 父级设了
color-scheme: light，而用户系统是暗色模式 → 浏览器可能强制降级用系统色（尤其 macOS Safari） - 值用了
transparent或currentcolor→ Chrome 直接忽略，Firefox 控制台报 warning
调试时建议先清空所有自定义样式，只留 accent-color，确认基础是否生效，再逐条加回。
怎么用 CSS 变量实现全局主题联动？
把 accent-color 绑定到 :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 的滑块把手、progress 的未完成轨道、checkbox 的不确定态，都得额外处理——accent-color 不是万能覆盖层，而是精准控制开关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
