accent-color仅对checkbox、radio、range和progress四类原生控件的强调区生效，不支持text、textarea、select等；必须通过CSS声明，直接作用于目标元素，且禁用appearance:none后失效。
能，但只对部分控件生效，且必须用 CSS 声明，不能靠 HTML 属性或内联样式“硬套”。
哪些表单控件真正响应 accent-color？
它不是万能染色剂，只作用于浏览器原生渲染中存在「强调区域」的控件：
-
input[type="checkbox"]：勾选标记（✓）和选中背景 -
input[type="radio"]：圆点标记 -
input[type="range"]：已填充轨道部分（不包括::thumb） -
progress：已完成进度条部分（不包括未完成轨道）
以下控件加了也无效：input[type="text"]、textarea、select、file —— 它们得靠 border、background 等手动覆盖。
为什么写了 accent-color 却没变色？
最常见干扰源不是语法错，而是样式冲突：
立即学习“前端免费学习笔记（深入）”；
-
appearance: none显式关闭原生外观 → 高亮区域消失，accent-color失效 - 用
background或mask完全覆盖了原生控件 → 颜色还在，但被遮住了 - 父级或自身设了
color-scheme: light/dark，而系统偏好不匹配 → 浏览器强制降级用系统色（尤其 macOS Safari） - 在
label或外层容器上写accent-color→ 必须直接作用于控件元素本身
调试建议：临时清空所有自定义样式，只留 accent-color，确认是否生效；再逐条加回，定位干扰项。
怎么让主题色改一次，全站控件自动同步？
绑定 CSS 变量是最稳的方案，别写死颜色值：
:root {
--form-accent: #3b82f6;
}
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
accent-color: var(--form-accent);
}
这样只需改一行 --form-accent 值，所有支持控件立刻响应。注意两点：
- 变量未定义时，
accent-color: var(--missing)整条声明会被忽略，不是回退到默认色 - 深色模式适配可结合媒体查询：
@media (prefers-color-scheme: dark) { :root { --form-accent: #60a5fa; } }
accent-color 和伪元素样式的关系
它不替代 ::marker 或 ::thumb，而是更高层的控制逻辑：
-
accent-color会自动影响checkbox的::marker主色，但如果你显式写了input[type="checkbox"]::marker { color: red; }，就会覆盖它 -
input[type="range"]::thumb完全不受accent-color控制，必须单独用background-color设置 -
progress的未完成轨道颜色也得另配，比如progress::-webkit-progress-bar
真正容易被忽略的是：accent-color 只改“强调区”，不是整个控件。指望一个属性包圆全部视觉，一定会踩坑。
