accent-color仅影响checkbox、radio、range及部分file输入框的勾选状态视觉反馈，不作用于文本框光标或选中文本色；需直接设置在目标元素上，且注意浏览器兼容性与无障碍要求。
accent-color 能改哪些输入框的选中色
accent-color 只影响原生表单控件中带「勾选状态」的元素，比如 <input type="checkbox">、<input type="radio">、<input type="range">，以及部分浏览器下的 <input type="file"> 按钮。它不作用于文字输入框（text、email 等）的光标或选中文本颜色——那是 ::selection 或 caret-color 的事。
常见误解是以为设了 accent-color 就能统一所有“高亮色”，其实它只管「控件自身的激活态视觉反馈」，和文本选中、焦点边框完全无关。
怎么写才真正生效
必须直接作用在目标元素上，或其可继承的父级（但注意：不是所有表单元素都继承该属性）。最稳妥的是内联或类选择器直写：
input[type="checkbox"] {
accent-color: #3b82f6;
}
以下写法容易失效：
- 写在
input通用选择器里，没限定type—— 浏览器会忽略对不支持类型的声明 - 用
* { accent-color: ... }全局覆盖 —— 多数浏览器不继承该属性，且可能被 UA 样式重置 - 在伪类如
:checked里设置 ——accent-color是控制“未交互时的基础色”，不是状态切换色
兼容性坑点：Safari 和旧 Chrome 怎么办
Chrome 93+、Firefox 92+、Edge 93+ 原生支持 accent-color；Safari 15.4+ 才开始支持，且早期版本（15.0–15.3）仅支持 checkbox 和 radio，不支持 range 滑块轨道色。
如果需要兼容 Safari 15.0–15.3 或 Chrome 92–，得回退到传统方案：
-
checkbox/radio：用appearance: none+ 自定义背景 +::before伪元素模拟 -
range：必须分别处理::webkit-slider-thumb和::webkit-slider-runnable-track，且无法用单一属性控制整体色调 - 别依赖
accent-color做关键视觉提示，尤其涉及无障碍（如颜色对比度不足时）
和 focus outline、::selection 混用时的干扰
accent-color 不会影响 :focus 时的轮廓线（outline），也不影响用户选中文本的颜色（::selection）。但三者共存时容易让人误判“哪个才是主高亮”：
- 比如给
input[type="checkbox"]设了accent-color: red，又给整个表单加了outline: 2px solid blue，焦点状态下红蓝并存，视觉权重混乱 - 若同时设置了
::selection { background: red }，用户选中页面任意文本都会变红，反而削弱了 checkbox 的专属感 - 建议：用
accent-color统一控件基调，用outline专注可访问性焦点，用::selection控制内容区文本，三者色值最好有明显区分
真正麻烦的不是写法，而是判断这个颜色到底要服务于谁——是设计师指定的品牌色？是满足 WCAG 对比度的合规色？还是适配深色模式的动态色？accent-color 支持 CSS 变量和 prefers-color-scheme，但一旦嵌套多层条件，就很容易在某个浏览器里突然不生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
