accent-color 仅对 checkbox、radio、range 和 progress 四类原生控件的强调区生效，需保持原生渲染；appearance: none、遮盖样式或 color-scheme 不匹配会导致失效，且不继承，须显式选择器应用。
accent-color 不是一键万能染色开关，它只对 input[type="checkbox"]、input[type="radio"]、input[type="range"] 和 progress 四类原生控件的“强调区”生效，且必须满足原生渲染前提。
哪些控件真正响应 accent-color？
它不看标签名是否是 input，而看浏览器是否为其保留了原生强调结构：
-
input[type="checkbox"]：勾选标记（✓）和选中背景色 -
input[type="radio"]：内部圆点颜色 -
input[type="range"]：已填充轨道部分（不包括::thumb） -
progress：已完成进度条部分（不包括未完成轨道）
以下加了也白加：input[type="text"]、textarea、select、file、button——它们得靠 border、background、color 手动调。
为什么写了 accent-color 却没变色？
最常见失效原因不是语法错，而是被其他样式“悄悄关掉”了：
-
appearance: none显式关闭原生外观 → 强调区域消失，accent-color失效 - 用
background或mask完全覆盖控件 → 颜色还在，但被遮住了 - 父级或自身设了
color-scheme: light，而系统当前是深色模式 → Safari/macOS 可能强制回退到系统色 - 写在
label或外层容器上 → 必须直接作用于控件元素本身
调试建议：临时清空所有自定义样式，只留 accent-color，确认是否生效；再逐条加回，定位干扰项。
如何用 :root + CSS 变量实现全站同步换色？
绑定变量是最稳的方案，避免写死颜色值：
:root {
--form-accent: #3b82f6;
}
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
accent-color: var(--form-accent);
}
关键细节：
- 变量未定义时，
accent-color: var(--missing)整条声明会被忽略（不是回退到默认色） - 深色模式适配可结合媒体查询：
@media (prefers-color-scheme: dark)里改--form-accent值即可 -
accent-color不继承，所以不能只写在:root上就指望子元素自动生效——仍需显式选择器匹配目标控件
accent-color 和伪元素样式怎么共存？
它属于更高层的控制逻辑，会自动影响某些伪元素的主色，但会被显式声明覆盖：
-
accent-color会影响input[type="checkbox"]::marker的颜色，但如果你写了::marker { color: red }，就会盖过它 -
input[type="range"]::thumb完全不受accent-color控制，必须单独用background-color设置 -
indeterminate状态下的 checkbox 强制灰色，accent-color无效——这是规范限制，不是 bug
真正容易被忽略的是：一旦你用 appearance: none 或 background + 伪元素彻底重绘控件，accent-color 就彻底退出游戏——这时候就得切回传统手绘方案，跟它无关了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
