accent-color仅对checkbox、radio、range（已填充轨道）、progress（已完成条）四类原生控件的强调区生效；对select、textarea、text、button等无效，且依赖原生外观、不继承、不响应系统主题自动切换。
accent-color 只能快速定制四类原生控件的强调区颜色：checkbox、radio、range（已填充轨道）、progress（已完成条）；对 text、select、textarea、button 等完全无效，写了也不变色。
哪些控件真正响应 accent-color？
它不是“表单控件染色开关”，而是浏览器为特定原生渲染结构预设的语义化高亮入口：
-
input[type="checkbox"]：勾选标记（✓）和选中时的背景色 -
input[type="radio"]：内部圆点填充色 -
input[type="range"]：已填充轨道部分（不包括::thumb） -
progress：已完成进度条部分（不包括 未完成轨道）
以下写了也白写：select、textarea、input[type="text"]、button、file。它们的颜色必须用 border、background、color 单独控制。
为什么写了 accent-color 却没变色？
失效几乎从不因为语法错，而是破坏了底层前提：
- 用了
appearance: none或-webkit-appearance: none→ 原生结构被剥离，强调区消失 - 值设为
transparent或currentcolor→ Chrome 直接忽略，Firefox 控制台报 warning - 在
label、form或外层容器上声明 → 必须直接作用于控件自身（或通过:root继承） - 没加
<meta name="color-scheme" content="light dark">→ Safari/Chrome 在深色模式下可能强制回退到系统色
调试建议：临时清空所有自定义样式，只留 accent-color，确认是否生效；再逐条加回，定位干扰项。
怎么让主题色改一次，全站控件同步更新？
绑定 CSS 变量是最稳的方案，别写死颜色值：
:root {
--form-accent: #3b82f6;
accent-color: var(--form-accent);
}
关键点：
-
accent-color本身不继承，但变量会继承；写在:root才能全局透传 -
var(--form-accent)没 fallback 时，变量未定义会导致整条声明被忽略（不是回退到默认色） - 深色模式适配不能只靠
@media (prefers-color-scheme: dark)重写accent-color—— 用户切换系统主题时，纯 CSS 不会重绘，需 JS 监听matchMedia并切换 class
真正容易被忽略的是：input[type="range"]::thumb、progress 的未完成轨道、checkbox 的 indeterminate 状态，这些区域完全不受 accent-color 控制，必须单独处理。一旦你用 appearance: none 或 background + 伪元素覆盖控件，默认渲染路径就断了，accent-color 随之退出游戏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
