accent-color仅Chrome93+、Edge93+、Firefox110+原生支持，Safari当前不支持；全平台一致需用appearance: none配合::before自定义，并确保可访问性。
单选按钮组的 accent-color 不生效？先确认浏览器支持范围
Chrome 93+、Edge 93+、Firefox 110+ 才原生支持 accent-color，Safari 目前（iOS 16.4 / macOS 13.3）仍不支持。如果你在 Safari 里发现单选按钮颜色没变，不是写错了，是它压根不认这个属性。
所以别只靠 accent-color 做主题统一——它只是快捷方式，不是兜底方案。真要全平台一致，得手动重绘 input[type="radio"] 的外观。
- 检查当前浏览器版本：
navigator.userAgent或直接在控制台运行CSS.supports('accent-color', 'red') - 若返回
false，说明必须走自定义样式路径 - 别把
accent-color当成“CSS 变量绑定”，它只接受字面颜色值（var(--primary)会失效）
用 :checked + ::before 模拟选中状态时，如何读取 CSS 变量
真正能响应 CSS 变量的是伪元素的样式声明，比如 ::before 的 background-color。关键在于：变量必须在伪元素规则里直接使用，不能通过 JS 注入或间接计算。
:root {
--theme-accent: #3b82f6;
}
<p>.radio-custom input[type="radio"] {
appearance: none;
width: 1.2em;
height: 1.2em;
border: 2px solid #94a3b8;
border-radius: 50%;
position: relative;
}</p><p>.radio-custom input[type="radio"]::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0.6em;
height: 0.6em;
border-radius: 50%;
background-color: var(--theme-accent); /<em> ✅ 这里能生效 </em>/
opacity: 0;
transition: opacity 0.15s;
}</p><p>.radio-custom input[type="radio"]:checked::before {
opacity: 1;
}</p>
-
appearance: none是起点，否则浏览器默认样式会干扰 -
::before必须设content，否则不渲染 - 别给
input自身设background-color，它对原生单选框无效
多个单选按钮组共用同一套变量，但需要局部覆盖怎么办
CSS 变量天然支持作用域继承，只要在某个父容器上重新声明，内部所有子元素（包括 ::before）都会自动取新值。不需要为每组写单独类名。
<div class="radio-group"> <label><input type="radio" name="size" value="s"> S</label> <label><input type="radio" name="size" value="m"> M</label> </div> <p></p><div class="radio-group" style="--theme-accent: #ef4444;"> <label><input type="radio" name="priority" value="high"> 高</label> <label><input type="radio" name="priority" value="low"> 低</label> </div>
- 第二组会用红色圆点，第一组保持全局
--theme-accent - 如果用 JS 动态改主题，只需改
document.documentElement.style.setProperty('--theme-accent', '#xxx') - 注意：不要在
input标签上 inline 写style="--theme-accent:..."，变量必须在可继承的容器节点上
无障碍和焦点样式不能被自定义样式吃掉
隐藏原生控件后，键盘 Tab 和屏幕阅读器仍需正常工作。光有视觉反馈不够，还得保留焦点环、语义和可访问性属性。
- 务必保留
for+id关联或包裹，否则点击文字无法触发选中 - 加
outline: 2px solid var(--theme-accent); outline-offset: 2px;到input:focus，别只靠box-shadow - 禁用
outline: none是常见坑，尤其在重置样式表里容易误删 - 测试方法：按
Tab键切换焦点，看是否清晰高亮；用 VoiceOver 或 NVDA 朗读，确认能读出选项值
CSS 变量本身不会触发重绘，但伪元素的 opacity、transform 等属性动画必须谨慎设置——过渡太慢会让点击反馈迟钝，太快又难察觉。最稳妥的是用 0.15s 左右的 transition，且只作用于真正变化的属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
