accent-color仅对checkbox、radio、range（已填充轨道）和progress（已完成条）四类原生控件的强调区生效，需保持原生渲染、禁用appearance:none、避免transparent/currentcolor值，且必须直接作用于控件自身或通过:root继承。
accent-color 能快速统一 checkbox、radio、range 和 progress 的强调色，但不是“所有表单控件都能染”，更不是“写了就一定变”。它只作用于浏览器原生渲染路径中预定义的高亮区域，且极易因样式干扰而静默失效。
哪些控件真正响应 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或外层容器上写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等伪元素在部分浏览器中仍需手动配色
真正容易被忽略的是：indeterminate 状态下的 checkbox 颜色强制为灰色，accent-color 完全失效——这是当前规范限制，不是 bug，也无纯 CSS 解法。
