accent-color仅稳定支持checkbox、radio、range和progress四类原生控件；不支持select（部分浏览器仅影响下拉选中勾）、button及text输入框，且必须直接作用于目标元素，不继承，禁用appearance:none后失效。
accent-color 能直接改 checkbox、radio、range、progress 的强调色，但不是所有地方都生效——关键看是否还保留原生渲染逻辑。
哪些元素支持 accent-color？
目前稳定支持的只有四类原生控件：
-
<input type="checkbox">（勾选标记颜色） -
<input type="radio">（选中填充色） -
<input type="range">（滑块::thumb和轨道高亮部分） -
<progress>（进度条填充色）
注意：<select> 在部分浏览器（如 Chrome 120+）中仅影响下拉菜单内选中项的勾选标记，<button> 或 <input type="text"> 完全不支持——别往它们身上试。
accent-color 写在哪才起作用？
必须直接作用于控件元素本身，不能靠父容器继承“透下去”：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
input[type="checkbox"] { accent-color: #ff6b6b; } - ❌ 无效：
label { accent-color: #ff6b6b; }或.form-group { accent-color: #ff6b6b; }
哪怕你给 label 设了 accent-color，里面的 input 也不会变——它不继承这个属性，除非你显式选中那个 input 元素。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
为什么写了 accent-color 却没反应？
最常见三个干扰点：
-
appearance: none显式关闭了原生外观 →accent-color失效（因为没“强调区域”可染色） - 用
background、mask或伪元素完全覆盖了控件 → 颜色还在，只是被盖住了 - 设了
color-scheme: light但系统处于深色模式（尤其 Safari），浏览器可能强制回退到系统默认色
调试建议：临时删掉所有其他样式，只留一条 input[type="checkbox"] { accent-color: hotpink; }，确认是否生效；再逐条加回，定位冲突项。
accent-color 的值能写什么？
只接受纯色值，不支持渐变、图片或 transparent：
- ✅ 支持：
#3498db、rgb(52, 152, 219)、hsl(205, 65%, 53%)、rebeccapurple、var(--primary) - ❌ 不支持：
linear-gradient(...)、url(...)、transparent（写上去会退回到浏览器默认色，不是“透明”）
用 CSS 变量是推荐做法，方便主题切换：:root { --brand: #e74c3c; } input { accent-color: var(--brand); }。但要注意变量未定义时会失效，别漏了 fallback。
真正麻烦的不是怎么写，而是判断当前控件是否还走原生渲染路径——一旦加了 appearance: none 或用 background 手动画了个圆，accent-color 就彻底退出了这场游戏。
