单选按钮背景色需通过伪元素+:checked状态实现，隐藏原生控件但保留可访问性，用css变量绑定:checked选择器控制颜色，label需relative定位，兼顾焦点与无障碍。
单选按钮 input[type="radio"] 默认样式无法直接改背景色
浏览器对 input[type="radio"] 的原生渲染是强管控的，background-color、border 甚至 appearance 在多数浏览器里都无效或行为不一致。想换颜色，必须绕过原生控件，用 ::before/::after 伪元素盖一层自定义视觉层。
关键不是“怎么填色”，而是“怎么让伪元素响应选中状态”。得靠 :checked + 同级/父级定位配合实现。
- 必须把
input设为opacity: 0或position: absolute; left: -999px隐藏，但不能用display: none或visibility: hidden，否则失去可访问性和状态联动 - 自定义圆点通常用
label包裹input，再用label::before绘制外圈，label::after绘制内点 - Chrome 和 Safari 对
appearance: none支持较好，Firefox 仍需隐藏原生控件才能生效
用 CSS 变量控制激活背景色，要绑定到 :checked 状态上
变量本身不触发重绘，得靠选择器切换时读取不同值。最稳妥的方式是：把变量定义在 input:checked + label 或 input:checked ~ label 这类能精准命中“被选中项”的选择器里。
别把变量写在 :root 或父容器上然后指望它自动更新——CSS 变量没有响应式监听机制，值不会随状态变。
- 推荐写法：
input:checked + label { --dot-bg: #4f46e5; }，再在label::after里用background-color: var(--dot-bg); - 如果多个单选组需要不同主题色，给每组加 class，比如
.theme-red input:checked + label { --dot-bg: #ef4444; } - 避免用
label:hover或label:focus覆盖:checked的变量，容易导致点击后颜色回退
label 和 input 的 DOM 顺序影响伪元素定位
伪元素依附于 label，但它的视觉位置要和原生 radio 对齐，否则点击热区错位。常见错误是 label 没设 position: relative，导致 absolute 定位的伪元素飘走。
更隐蔽的问题是：若 input 写在 label 外面，又没用 for 属性绑定，input:checked + label 就完全不生效。
- 务必保证
input和label是相邻兄弟（input在前）或嵌套关系（label包住input） -
label必须有position: relative，伪元素才好用absolute精确覆盖 - 不要依赖
margin或transform微调伪元素位置——不同字体、缩放比例下偏移会漂移，改用top/left配合em或ex单位更稳定
无障碍和聚焦样式容易被忽略
隐藏原生控件后，键盘用户按 Tab 进入时看不到焦点框，屏幕阅读器也可能跳过。这不是“美化问题”，是合规硬性要求。
很多方案只加了 :checked 样式，却忘了 :focus-visible 下该高亮什么。
- 给
label加outline: 2px solid #4f46e5;并设outline-offset: 2px;，确保焦点可见 - 用
input:focus-visible + label单独定义聚焦态边框色，避免和选中态混淆 - 别用
box-shadow模拟焦点框——某些 Windows 高对比度模式下会被强制抹掉 - 测试时关掉鼠标，纯用键盘操作一遍，看是否能正常切换、提交
input[type="radio"] {
position: absolute;
opacity: 0;
cursor: pointer;
}
input:checked + label::after {
background-color: var(--dot-bg, #3b82f6);
}
label {
position: relative;
padding-left: 1.75em;
cursor: pointer;
}
label::before {
content: "";
position: absolute;
top: 0.25em;
left: 0;
width: 1em;
height: 1em;
border: 2px solid #9ca3af;
border-radius: 50%;
}
label::after {
content: "";
position: absolute;
top: 0.45em;
left: 0.2em;
width: 0.6em;
height: 0.6em;
border-radius: 50%;
background-color: transparent;
transition: background-color 0.15s ease-in;
}
变量真正起效的位置，永远在 :checked 触发的选择器里，而不是定义处。这点卡住很多人——写了变量，也用了 var()，但没把它和状态绑定对，结果颜色死活不变。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
