accent-color 是 css 属性，仅对 checkbox、radio、range 和 progress 有效，只染色其强调区；需原生渲染（不能 appearance: none）、不支持 transparent/currentcolor，推荐 :root 统一声明并设 fallback。
accent-color 不是 HTML 属性，而是 CSS 属性，必须通过 CSS 声明才生效；它只对 input[type="checkbox"]、input[type="radio"]、input[type="range"] 和 progress 四类原生控件起作用，且仅染色其“强调区”（如勾选标记、滑块填充部分），不是整个控件。
为什么直接写 style="accent-color: red" 没反应
常见错误是把它当内联样式“万能钥匙”乱套——但 accent-color 生效有硬性前提：
- 目标元素必须本身支持该属性（
input[type="text"]、select、button加了也白加） - 不能写了
appearance: none，否则浏览器不渲染原生结构，accent-color就失去作用对象 - 值不能是
transparent或currentcolor（Chrome 会忽略，Firefox 控制台报 warning） - 父级用了
!important覆盖或 JS 动态重置样式，也可能压制它
:root 设置一次，全站控件自动染色
最省事、最可靠的做法是在根节点统一声明，利用其可继承性向下渗透（注意：是继承，不是“作用于子元素”，所以仍需控件自身支持）：
:root {
--theme-accent: #2196F3;
accent-color: var(--theme-accent);
}
这样所有子树中符合条件的控件都会默认使用该色。关键点：
-
::root比html更稳妥，始终指向最高层作用域 - 变量未定义时
var(--theme-accent)会退回到accent-color的初始值（auto），建议加 fallback：var(--theme-accent, #007bff) - 不要在媒体查询里重复写
accent-color，改变量即可响应深色模式
accent-color 只改“强调区”，thumb 和 indeterminate 状态得另配
别指望一个属性包圆全部视觉——它只影响控件中浏览器认定的“强调区域”：
-
input[type="range"]的已填充轨道会变色，但滑块把手（::thumb）仍需单独用background-color控制 -
progress的已完成部分染色，剩余轨道颜色得靠background或伪元素补 -
input[type="checkbox"]在indeterminate = true状态下，颜色强制为灰色，accent-color完全失效（这是当前规范限制，非 bug）
真正容易被忽略的是：一旦你用 appearance: none 或 background + 伪元素完全覆盖控件，默认渲染路径就断了，accent-color 随之退出游戏——这时候就得切回传统手绘方案，和它无关了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
