accent-color仅对checkbox、radio、range和progress四类原生控件的强调区生效：checkbox勾选标记、radio圆点、range已填充轨道、progress已完成条；select、textarea等不支持，且依赖原生渲染、不继承、不响应系统主题切换。
accent-color 不是“统一所有表单控件”的开关，它只对四类原生控件的强调区生效：checkbox 勾选标记、radio 圆点、range 已填充轨道、progress 已完成条。其他如 select、textarea、input[type="text"] 写了也无效。
哪些元素真正支持 accent-color
必须同时满足两个条件：元素本身支持该属性 + 保持原生渲染结构。有效组合只有：
-
input[type="checkbox"]：勾选标记（✓）和选中背景色 -
input[type="radio"]：内部圆点填充色 -
input[type="range"]：已填充轨道部分（不包括::thumb） -
progress：已完成进度条部分（未完成轨道不受影响）
常见误用：select 加了 accent-color 没反应——不是写法错，是浏览器根本不支持这个属性作用于它。
为什么写了但颜色没变？
失效几乎从不因为语法错误，而是破坏了底层前提：
立即学习“前端免费学习笔记（深入）”；
- 用了
appearance: none或-webkit-appearance: none→ 原生结构被剥离，强调区消失 - 值设为
transparent或currentcolor→ Chrome 直接忽略，Firefox 控制台报 warning - 在
label、form或外层容器上声明 → 必须直接作用于控件自身（或通过: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 状态（比如 input[type="checkbox"] 设置了 indeterminate = true）下，颜色强制为灰色，accent-color 完全失效 —— 这是当前规范限制，非 bug，也无纯 CSS 解法。
