accent-color仅直接修改input[type="checkbox"]、input[type="radio"]、input[type="range"]和progress四类原生控件的强调区高亮色；不支持select、button、input[type="text"]等，且需保持原生渲染、禁用appearance:none。
accent-color 能直接改哪些控件的高亮色
accent-color 只对原生表单控件中带“强调状态”的部分生效，不是所有控件都支持。目前稳定支持的有：input[type="checkbox"]、input[type="radio"]、input[type="range"]，以及 Safari 中的 progress 元素。Firefox 和 Chrome 已全面支持前三个；Edge 从 v101+ 开始支持。但 select、button、input[type="text"] 等完全不响应 accent-color —— 它们没有内置强调态，得靠 background 或 border 手动控制。
为什么加了 accent-color 却没变色
常见原因有三个：
• 控件被自定义样式覆盖了，比如写了 input[type="checkbox"]::before 或用了 -webkit-appearance: none，这时原生渲染路径被切断，accent-color 失效；
• 父级设置了 color-scheme: dark 但未配 prefers-color-scheme 媒体查询，导致系统主题与 CSS 不同步；
• 在旧版 Safari（caniuse 确认运行环境。
如何配合 antd 或 Tailwind 实现主题联动
如果你用的是 antd + CSS 变量方案，不要在组件里硬写颜色值，而是把 accent-color 指向设计 Token：
• 先确保 :root 或 body 上已声明 --primary-color: #2979FF；
• 然后统一设置：
input[type="checkbox"],<br>input[type="radio"],<br>input[type="range"] {<br> accent-color: var(--primary-color);<br>}
• Tailwind 用户可在 tailwind.config.js 的 theme.extend.colors 里定义同名 token，并通过 accent-[color] 类名动态绑定，但注意：Tailwind 5.3+ 才原生支持 accent- 前缀，旧版本需手动添加插件。
移动端 checkbox/radio 的点击热区容易失效
Android Chrome 和 iOS Safari 对原生控件的点击区域默认偏小，尤其在高密度屏上。仅靠 accent-color 无法扩大热区，必须额外处理：
• 给控件父容器设 padding 并用 label 显式绑定 for 或包裹子元素；
• 避免对 input 自身设 width/height，改用 transform: scale(1.2) 配合 transform-origin 居中缩放；
• 不要用 pointer-events: none 或 opacity: 0 隐藏原生控件再盖一层伪元素——那样 accent-color 就彻底没意义了。
真正难的不是写对那行 accent-color，而是判断什么时候不该用它。比如需要兼容 IE 或低版本 WebView 的项目，或者控件已被深度定制的 antd 表单场景，这时候硬推 accent-color 反而增加维护成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
