accent-color 仅影响四类原生控件的强调区：checkbox勾选标记、radio圆点、range已填充轨道、progress已完成条；对select等无效，且依赖原生外观、不继承、不响应系统主题切换。
accent-color 能统一部分原生控件的强调色，但“各端自适应”不是它单独能解决的事——它不响应系统主题切换、不跨控件生效、也不处理深色模式下的自动 fallback。想靠它“一键适配所有端”，会掉进兼容性和语义误用的坑里。
哪些控件真正受 accent-color 影响？
只对四类原生渲染控件的「强调区」起效，且必须保留默认外观：
-
input[type="checkbox"]：勾选标记（✓）和选中背景 -
input[type="radio"]：内部圆点填充色 -
input[type="range"]：已填充轨道部分（不包括::thumb） -
progress：已完成进度条部分（不包括 未完成轨道）
以下写了也无效：select、textarea、input[type="text"]、button、file。它们的颜色得靠 border、background、color 单独控制。
为什么在 iOS Safari 或 macOS Chrome 里颜色没变？
常见失效原因不是写法错，而是破坏了底层前提：
- 用了
appearance: none或-webkit-appearance: none→ 原生结构被剥离，强调区消失 - 值设为
transparent或currentcolor→ Chrome 直接忽略，Firefox 控制台报 warning - 在
label、form或外层容器上写accent-color→ 必须直接作用于控件自身（或通过:root继承） - 没声明
<meta name="color-scheme" content="light dark">→ Safari/Chrome 在深色模式下可能强制回退到系统色
怎么让主题色改一次，全站控件同步更新？
绑定 CSS 变量是最稳的方案，别写死颜色值：
:root {
--form-accent: #2196F3;
accent-color: var(--form-accent, #007bff);
}
关键点：
-
accent-color本身不继承，但变量会继承；所以写在:root才能全局透传 -
var(--form-accent, #007bff)的 fallback 只在变量未定义时触发，不是“兜底生效” - 深色模式适配不能只靠
@media (prefers-color-scheme: dark)重写accent-color—— 用户切换系统主题时，纯 CSS 不会重绘，需 JS 监听matchMedia并切换 class
accent-color 和伪元素样式谁优先？
它提供的是更高层的“主题色入口”，但会被显式伪元素规则覆盖：
-
input[type="checkbox"]::marker { color: red; }会覆盖accent-color -
input[type="range"]::thumb完全不受accent-color控制，必须用background-color单独设 -
progress::-webkit-progress-value等伪元素在部分浏览器中仍需手动配色，accent-color不接管 - 复选框处于
indeterminate = true状态时，颜色强制为灰色，accent-color无效（规范限制，非 bug）
真正容易被忽略的是：一旦你用 appearance: none + background + 伪元素完全重绘控件，accent-color 就彻底退出游戏——这时候它就只是个摆设，该回归传统手绘方案了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
