有效，但仅限Chrome 93+、Firefox 103+、Safari 15.4+，且仅作用于未设appearance: none的原生单选框；必须直接设置在<input>上或可继承祖先（如form）中，不可设在label等非继承容器上。
accent-color 对原生 <input type="radio"> 有效吗？
有效，但仅限于现代浏览器（Chrome 93+、Firefox 103+、Safari 15.4+），且只作用于默认样式的原生单选框。它不会影响已用 appearance: none 移除样式的元素，也不会穿透到自定义伪元素（如 ::before）上。
常见错误是给父容器设 accent-color，结果无效——该属性必须直接设置在 <input> 元素本身或其可继承的祖先（如 form）上，且输入框未被重置样式。
- ✅ 正确：
<input type="radio" style="accent-color: #3b82f6;"> - ❌ 无效：
<label style="accent-color: #3b82f6;"><input type="radio"></label>（label不继承该属性） - ⚠️ 注意：若全局 CSS 中写了
input { appearance: none; }，所有accent-color都会失效
为什么 Safari 下 accent-color 有时不生效？
Safari 对 accent-color 的支持较保守：它要求单选框必须处于「未显式禁用外观」状态，且不能有冲突的盒模型干扰（比如 border 或 background 直接覆盖了原生渲染层）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 移除任何对
input[type="radio"]的appearance、border、background覆盖（哪怕只是设了border: 0） - 避免在同一样式规则中混用
accent-color和color（Safari 可能优先按color推导主题色） - 测试时用纯 HTML + 内联样式快速验证，排除 CSS 层叠干扰
例如，这个在 Safari 中可能失败：
input[type="radio"] { border: 1px solid #ccc; accent-color: #ef4444; }——删掉 border 行通常就能恢复颜色。
如何让 accent-color 在深色模式下自动切换？
它本身不响应 @media (prefers-color-scheme)，但你可以用 CSS 自定义属性配合媒体查询实现动态切换。
推荐写法：
:root {
--radio-accent: #3b82f6;
}
@media (prefers-color-scheme: dark) {
:root {
--radio-accent: #60a5fa;
}
}
input[type="radio"] {
accent-color: var(--radio-accent);
}注意点：
- 不要在媒体查询里直接写
input[type="radio"] { accent-color: #60a5fa; }——部分旧版 Chrome 会忽略嵌套中的accent-color - 变量名必须用
var()包裹，不能写成accent-color: #3b82f6; /* dark */这类注释式 fallback - 该方案在所有支持
accent-color的浏览器中都可靠，包括 Safari
和 filter: hue-rotate() 比，哪个更适合改单选框颜色？
accent-color 是语义化方案，轻量、无障碍友好、无需额外 DOM 结构；filter 是视觉 hack，容易失真、影响焦点轮廓、且对高对比度模式不友好。
除非你必须兼容 IE 或 Chrome 92 及更早版本，否则别用 filter。典型问题包括：
-
hue-rotate(120deg)会让蓝色变绿，但无法精确控制为某个 Pantone 色号 - 配合
transform: scale()使用时，滤镜会模糊焦点环（:focus-visible） - Windows 高对比度模式下，
filter会被强制禁用，而accent-color仍保留
真正需要兼容老浏览器时，应降级为完整自定义样式（appearance: none + ::before + checked 状态切换），而不是靠 filter 折中。
