accent-color 是 css 属性，非 html 属性，仅对 checkbox、radio、range、progress 等原生控件生效；需通过 css 声明（如 :root 或元素选择器），不支持内联样式通用化；其作用限于强调区，thumb 或 indeterminate 状态需额外处理。
accent-color 不是 HTML 属性，而是 CSS 属性。直接在 HTML 标签里写 accent-color 不生效，必须用 CSS 声明。
为什么直接写 style="accent-color: red" 有时没反应
常见错误是把它当成内联样式“万能钥匙”乱套——但 accent-color 的生效依赖两个前提：元素本身支持强调色，且样式作用域覆盖到该元素。
- 只对特定原生控件有效：
input[type="checkbox"]、input[type="radio"]、input[type="range"]、progress、部分浏览器下的select - 不支持的元素（如
input[type="text"]、textarea、file）加了也无效，别白费劲 - 内联样式优先级虽高，但若父级用了
!important覆盖或 CSSOM 动态重置，也可能被压制
:root 设置一次，全站控件自动染色
最省事、最可靠的做法是在根节点统一声明，利用其可继承性向下渗透：
:root {
accent-color: #2196F3;
}
这样所有子元素里的支持控件都会默认使用该色，无需重复写选择器。注意：:root 比 html 更稳妥，它始终指向最高层作用域，且兼容性一致。
- 想局部换色？直接给容器加样式：
.admin-form { accent-color: #f44336; } - 要响应式主题切换？绑定 CSS 变量：
:root { --theme-accent: #4CAF50; accent-color: var(--theme-accent); } - 设为
auto会回退到系统主题色，适合尊重用户偏好场景
遇到 indeterminate 状态颜色变灰，accent-color 失效怎么办
这是当前（Chrome 102+、Firefox 92+、Safari 15.4+）的已知限制：accent-color 对复选框的不确定状态（indeterminate = true）不生效，浏览器强制渲染为灰色。
- 这不是你代码写错，是规范尚未覆盖该状态
- 纯 CSS 无解，必须用 JS 补位：
checkbox.style.backgroundColor = 'rgb(33, 150, 243)'; - 仅需在设置
indeterminate后立即执行，无需监听；但要注意清除逻辑，避免和 checked 状态冲突
真正容易被忽略的是：accent-color 只改“强调区”，不是整个控件。比如 range 滑块只染已填充轨道，thumb（滑块把手）仍需单独用 ::thumb 控制；progress 也只染已完成部分，剩余轨道颜色得另配。别指望一个属性包圆全部视觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
