accent-color仅对input[type="checkbox"]、input[type="radio"]、input[type="range"]（已填充轨道）和progress（已完成部分）四类原生控件的强调区生效，需保持原生渲染、禁用appearance:none、避免transparent/currentcolor值，且必须直接作用于控件自身。
accent-color 不会“自动改变所有表单控件颜色”，它只对四类原生控件的强调区生效，且必须满足渲染前提——写错位置、加了 appearance: none、用了 transparent 值，都会让它彻底失效。
哪些控件真正响应 accent-color？
只有以下四类元素在保持原生渲染时才受控：
-
input[type="checkbox"]：勾选标记（✓）和选中背景色 -
input[type="radio"]：内部圆点填充色 -
input[type="range"]：已填充轨道部分（不包括::thumb） -
progress：已完成进度条部分（未完成轨道不受影响）
其他如 select、textarea、input[type="text"]、button、input[type="date"] 等写了也无效。它们的颜色得靠 border、background、color 单独控制。
为什么写了 accent-color 却没变色？
失效几乎从不因为拼写错误，而是破坏了底层前提：
立即学习“前端免费学习笔记（深入）”；
- 加了
appearance: none或-webkit-appearance: none→ 原生结构被剥离，强调区消失 - 值设为
transparent或currentcolor→ Chrome 直接忽略，Firefox 控制台报 warning - 写在
label、form或外层容器上 →accent-color不继承，必须直接作用于控件自身 - 没加
<meta name="color-scheme" content="light dark">→ Safari/Chrome 在深色模式下可能强制回退到系统色
怎么安全批量设置并支持主题切换？
绑定 CSS 变量是最稳路径，别写死颜色值：
:root {
--form-accent: #3b82f6;
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 状态（比如 JS 设置 checkbox.indeterminate = true）下，颜色强制为灰色，accent-color 完全失效——这是当前规范限制，非 bug，也无纯 CSS 解法。
