accent-color在Chrome 93前完全不生效，Firefox 111、Safari 15.4+才陆续支持；旧版浏览器直接忽略该声明，需用@supports渐进增强并回退伪元素样式。
accent-color在Chrome 93之前完全不生效
Chrome 93（2021年9月发布）是第一个稳定支持accent-color的版本；Firefox 111、Safari 15.4+才陆续跟上。如果你的项目仍需支持Chrome ≤92、Firefox ≤110 或 Safari ≤15.3，accent-color会被浏览器直接忽略——不是“没效果”，而是压根不解析该声明。
验证方法很简单：打开开发者工具 → 检查input[type="checkbox"]元素 → 在Styles面板里搜accent-color，若整行灰掉或标为“invalid property”，说明当前浏览器不识别。
- 旧版IE、Edge Legacy（≤79）：无任何支持，连语法都不认识
- Android WebView ≤ Chrome 92：同Chrome旧版，
accent-color无效 - 部分企业内网环境强制锁定旧Chromium内核（如v83–v91），必须走降级路径
哪些控件在旧浏览器里根本没法用accent-color
accent-color只对特定原生控件起作用，而旧浏览器的支持范围更窄：Firefox ≤91仅支持input[type="checkbox"]和input[type="radio"]，且必须配合-moz-appearance: none才能生效；Safari ≤15.3对progress和range完全不响应。
这意味着你不能写一条通用规则比如input, progress { accent-color: #3b82f6; }就指望全兼容——它在旧版里要么静默失败，要么只部分生效。
立即学习“前端免费学习笔记（深入）”；
- 别对
select、textarea、input[type="text"]设accent-color：这些本就不支持，旧版更不会理 - 旧版Safari中
input[type="range"]的轨道染色失效，但::thumb伪元素还能手动控制 - Firefox旧版下
accent-color设了也白设，除非加-moz-appearance: none，但这会破坏原生可访问性
兼容方案：渐进增强 + 回退样式
不要用JS检测浏览器版本再加载不同CSS——太重且易过时。推荐用CSS特性查询（@supports）做轻量回退：
@supports (accent-color: #000) {
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
accent-color: var(--primary);
}
}
<p>/<em> 不支持accent-color时，用传统伪元素覆盖 </em>/
input[type="checkbox"]:not(:-webkit-appearance-none),
input[type="radio"]:not(:-webkit-appearance-none) {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border: 2px solid #9ca3af;
border-radius: 4px;
position: relative;
}</p><p>input[type="checkbox"]:checked::after,
input[type="radio"]:checked::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
background-color: var(--primary);
border-radius: 50%;
}
关键点：
-
@supports比UA检测更可靠，且现代构建工具（如PostCSS）能自动补前缀 - 回退样式里慎用
appearance: none：它会让屏幕阅读器丢失原生语义，务必配role="checkbox"和aria-checked - 别用
transparent或rgba(0,0,0,0)当回退色——旧版里它们会退到系统默认灰，不是“透明”
真正容易被忽略的兼容陷阱
很多人以为只要写了@supports就万事大吉，结果上线后发现暗色模式下颜色错乱、或macOS Safari里复选框突然变回蓝色——问题不在accent-color本身，而在它和color-scheme、系统偏好、父级样式之间的隐式耦合。
例如：html { color-scheme: light dark; }在旧版Safari里只是个无意义声明，但若同时写了meta name="color-scheme"，旧版会忽略整个meta，导致表单边框/焦点环仍按亮色渲染，和accent-color设定的主题色割裂。
- 旧版浏览器不读
color-scheme，所以别指望@media (prefers-color-scheme: dark)能联动accent-color - 如果用了CSS变量绑定
accent-color，确保变量本身有默认值（如:root { --primary: #3b82f6; }），否则旧版里变量未定义会导致整条规则失效 - 某些旧Android WebView会把
accent-color解析成auto，哪怕你写了具体颜色值
