accent-color 仅影响 checkbox、radio 和 range 控件的主色调标记部分，不支持 select、button、textarea；需浏览器 chrome 93+、firefox 97+、safari 15.4+；不继承、禁用 appearance: none、不可设为 transparent 或 currentcolor。
accent-color 能改哪些控件的颜色
accent-color 只影响原生表单控件中带“主色调标记”的部分，不是所有控件都响应它。目前稳定支持的只有：<input type="checkbox">、<input type="radio"> 和 <input type="range"> 的滑块/轨道高亮区（取决于浏览器）。其他如 select、button、textarea 完全不受影响——别试了，CSS 里写上也不会变。
注意：Chrome 93+、Firefox 97+、Safari 15.4+ 才真正启用该属性；旧版 Safari 用 -webkit-appearance: none 配合伪元素才能模拟类似效果，但那不属于 accent-color 范畴。
直接设置 accent-color 的写法和常见错误
最简写法就是给控件或其父容器加 CSS：
input[type="checkbox"] {
accent-color: #007bff;
}
但容易踩的坑有三个：
-
accent-color不继承，所以设在body或form上，子级input不会自动生效，必须显式作用于目标元素或用属性选择器匹配 - 值不能是
transparent或currentcolor（Chrome 会忽略，Firefox 报 warning） - 如果同时用了
appearance: none，accent-color就失效了——因为“无外观”意味着浏览器不渲染默认控件结构，自然也没地方上色
和自定义样式混用时的兼容性取舍
想既用 accent-color 又加边框、阴影、尺寸调整？可以，但得守住一条线：保留 appearance: auto（或干脆不写），否则控件退化成纯 div，accent-color 失效。
例如下面这段是安全的：
input[type="range"] {
accent-color: #e63946;
height: 8px;
border-radius: 4px;
}
而这段会让颜色丢失：
input[type="range"] {
appearance: none; /* ⚠️ 删掉这行，否则 accent-color 不起作用 */
accent-color: #e63946;
}
需要深度定制？老办法仍是 ::-webkit-slider-thumb 等伪元素 + background，但那就和 accent-color 无关了。
深色模式下 accent-color 的响应逻辑
accent-color 本身不感知深色模式，它只是静态颜色值。但你可以配合 @media (prefers-color-scheme: dark) 手动切换：
input[type="checkbox"] {
accent-color: #007bff;
}
<p>@media (prefers-color-scheme: dark) {
input[type="checkbox"] {
accent-color: #4cc9f0;
}
}</p>
注意：不要指望系统主题色自动映射——比如把 accent-color: CanvasText 这种系统颜色关键词当变量用，它不被支持。所有值都得是明确的 #rrggbb、rgb() 或命名色。
真正容易被忽略的是：某些 UI 框架（如 Bootstrap、Tailwind）的表单组件会强制重置 appearance 或注入内联样式，这时候 accent-color 很可能被覆盖，得用 !important 或提高选择器优先级来抢回控制权。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
