accent-color仅对三类原生控件生效：复选框、单选按钮的选中态高亮色，滑块的thumb和已填充轨道，以及progress元素的进度条填充色；select、文本框等不支持，需手动样式控制。
accent-color 能直接改复选框、单选按钮、滑块轨道这些原生控件的强调色，但不是所有表单元素都支持，也不能靠它改文本框边框或下拉箭头。
哪些元素真正响应 accent-color
目前只有三类原生控件会受 accent-color 影响：
-
<input type="checkbox">和<input type="radio">的选中态高亮色（如圆点、对勾） -
<input type="range">的滑块 thumb（拖拽小圆点）和已填充轨道（track fill） -
<progress></progress>元素的进度条填充色
注意：<select></select>、<input type="text">、<textarea></textarea> 完全无视这个属性——它们得靠 border、background 或伪元素手动控制。
为什么设了 accent-color 却没变化？
常见失效原因有三个：
立即学习“前端免费学习笔记（深入）”；
- 浏览器不支持：Chrome 93+、Firefox 92+、Safari 15.4+ 才支持，旧版 Safari 尤其容易踩坑
- 元素被自定义样式覆盖：比如给
input[type="checkbox"]加了-webkit-appearance: none，就会绕过原生渲染，accent-color失效 - 颜色值非法：传
accent-color: transparent或accent-color: currentColor是合法的；但传accent-color: inherit在部分浏览器里会被忽略
验证是否生效，最简单的方法是临时加一行 accent-color: hotpink; 到 body，看复选框有没有立刻变粉——没有就是环境或覆盖问题。
accent-color 和伪元素、appearance 的关系
想统一整站强调色，又不想每个控件单独写样式？可以这样组合用：
- 先全局设
accent-color: var(--primary);，覆盖支持的原生控件 - 对
<select></select>这类不支持的，用background: linear-gradient(...)+appearance: none模拟下拉箭头，并手动设边框色 - 慎用
appearance: none：一旦用了，accent-color对该元素就彻底无效，后续所有视觉都要自己手写
示例片段：
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
accent-color: #3b82f6;
}
<p>/<em> select 不吃 accent-color，得另起炉灶 </em>/
select {
appearance: none;
background: url("data:image/svg+xml,...") no-repeat right 0.5rem center / 1em;
border: 2px solid #3b82f6;
}真正难的不是设颜色，而是判断哪些地方必须放弃 accent-color、切回传统样式控制——比如需要兼容 IE 或旧版 Safari 时，它根本不存在。
