accent-color 仅对 checkbox、radio、select 下拉箭头及 range 滑块生效，不支持 text/textarea/按钮等；需配合 focus outline、option 样式、disabled 状态及伪元素手动补全主题。
accent-color 能统一控制 input[type="checkbox"]、input[type="radio"] 和 <select></select> 的高亮色，但**它不作用于所有表单控件，也不自动适配深色模式或系统主题变更**——想靠它“一键换肤”会漏掉大量元素。
哪些控件真正响应 accent-color？
目前仅 Chromium 111+（Chrome / Edge / 新版 Safari）和 Firefox 126+ 原生支持该属性，且只影响：
-
input[type="checkbox"]和input[type="radio"]的选中态颜色（背景/边框/图标） -
<select></select>的下拉箭头和聚焦边框色（部分浏览器仅改箭头） -
input[type="range"]的滑块（thumb）和轨道高亮部分（非全轨）
它对 input[type="text"]、textarea、按钮、禁用态、focus outline 宽度/样式等**完全无效**——这些仍需手动覆盖 border、outline、background 等。
为什么加了 accent-color 却没变色？
常见失效原因：
- 目标元素被其他 CSS 强制重置了颜色，比如
input { -webkit-appearance: none; }会直接让accent-color失效 - 用了自定义伪元素（如
::-webkit-checkbox）并设置了background或border，会覆盖原生渲染逻辑 - 在未启用
prefers-color-scheme检测的情况下，深色模式里系统可能忽略你设的浅色值（例如accent-color: #007aff在深色背景下对比度不足，浏览器可能降级为灰色） - CSS 优先级不够：必须写在未被更具体选择器覆盖的位置，推荐直接作用于表单控件本身，而非父容器
如何配合媒体查询做基础响应式主题切换？
可以结合 @media (prefers-color-scheme: dark) 动态设置，但注意：这不是“响应式布局”，而是系统偏好响应。示例：
input[type="checkbox"],
input[type="radio"],
select,
input[type="range"] {
accent-color: #3b82f6;
}
@media (prefers-color-scheme: dark) {
input[type="checkbox"],
input[type="radio"],
select,
input[type="range"] {
accent-color: #60a5fa;
}
}
⚠️ 这种写法不会随用户切换系统主题实时更新——需要 JavaScript 监听 matchMedia 并手动切换 class 才能触发重绘；纯 CSS 方案只能首次加载时生效。
真正要统一主题，还得补哪些关键样式？
accent-color 只是拼图一角。实际项目中必须同步处理：
-
input:focus-visible, select:focus-visible的outline颜色与宽度（否则焦点环仍是默认蓝） -
option在<select></select>下拉中的背景/文字色（accent-color对它完全无效） -
input:disabled的文本灰度与边框透明度（避免和启用态割裂） -
input[type="range"]的轨道（track）需额外用::-webkit-slider-runnable-track和::thumb伪元素控制，accent-color只影响 thumb 主色，不控制 track 渐变
最易被忽略的是：当用 CSS 自定义 select 箭头（比如用 background: url(...)）时，accent-color 就彻底失效——此时主题一致性必须全部手写，没有捷径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
