accent-color仅稳定支持input[type="checkbox"]、input[type="radio"]、input[type="range"]和progress元素，作用于其选中态视觉反馈（如勾、圆点、滑块thumb），不支持select下拉项全控、text输入框、button等，且不继承、不兼容appearance: none。
accent-color 能统一控制复选框、单选按钮等原生表单控件的强调色，但仅作用于“选中态”的视觉元素（如勾、圆点、滑块 thumb），无法修改未选中时的边框或背景——这点很多人误以为它能完全替代自定义样式。
accent-color 支持哪些表单元素？
目前稳定支持的包括：input[type="checkbox"]、input[type="radio"]、input[type="range"]、progress。部分浏览器（如 Chrome 125+）也开始支持 select 的下拉项选中色，但 option 本身仍不可控。
不支持：input[type="text"] 的 focus outline、textarea 边框、button 等非表单控件 UI 元素。
- Firefox 对
accent-color的支持较晚（v96+），且早期版本对range的 thumb 渲染不一致 - Safari 直到 v16.4 才完整支持，旧版 Safari 会直接忽略该属性，无 fallback 行为
- IE 完全不支持，无需考虑兼容性降级（IE 已终止支持）
如何用 CSS 变量联动 accent-color？
直接写死颜色值会破坏主题系统的一致性，应绑定到全局 CSS 变量：
立即学习“前端免费学习笔记（深入）”；
:root {
--theme-accent: #3b82f6;
}
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
accent-color: var(--theme-accent);
}
这样后续只需改 --theme-accent 就能同步更新所有控件的强调色。但注意：
- 必须确保
accent-color所在的选择器优先级足够，避免被更具体的选择器覆盖（比如某些 UI 库的.custom-checkbox input） - 不能写成
accent-color: var(--theme-accent, #3b82f6);—— fallback 在accent-color中无效，浏览器会静默忽略整个声明 - 深色模式切换时，建议用
:root.dark { --theme-accent: #60a5fa; }覆盖变量，而非媒体查询内重写accent-color值
accent-color 和自定义 checkbox 样式能共存吗？
可以，但有明确边界：一旦你用 appearance: none + 伪元素重绘复选框，accent-color 就失效了——它只对浏览器默认渲染的控件生效。
常见错误是同时写了：
input[type="checkbox"] {
appearance: none;
accent-color: #ef4444;
}
此时 accent-color 不起作用，因为控件已脱离原生渲染流。
- 若想保留无障碍语义又需要精细控制，推荐「渐进增强」：先用
accent-color快速统一基础主题，再对关键场景（如设计稿要求特殊动画/尺寸）单独加appearance: none并重写 - 禁用状态（
:disabled）下，accent-color仍生效，但颜色会被浏览器自动变淡（无需手动调整 opacity） - 高对比度模式（Windows HC）下，
accent-color会被系统强制覆盖，这是预期行为，不应试图绕过
真正容易被忽略的是：accent-color 不影响控件的尺寸、边框、阴影、焦点轮廓——这些仍需单独控制。一套完整的主题化方案，必须把 accent-color 当作「强调色补丁」，而不是「样式总开关」。
