纯CSS自定义单选框需三要素：input与label正确关联（显式for或隐式嵌套）、radio用appearance:none+opacity:0+absolute隐藏但保可访问性、结构必须input在label前以支持:checked+label样式切换。
纯 CSS 实现自定义单选框，关键不是靠 label 自己“画样式”，而是用 :checked + 隐藏原生 input[type="radio"] + label 承担点击区和视觉反馈——漏掉任一环都会失效。
确保 label 与 radio 正确关联
这是整个机制能工作的前提。浏览器必须知道哪个 label 点击后该触发哪个 input。两种方式都行，但必须选其一且保持结构稳定：
- 显式关联：给
input设id，label用for属性指向它，比如<input id="opt1"><label for="opt1">选项一</label> - 隐式关联：直接把
input嵌在label里，比如<label><input type="radio" name="theme">深色模式</label> - 别混用：同一组里有的用
for、有的嵌套，容易导致焦点或状态同步异常 - 别漏
name：所有同组input[type="radio"]必须有相同name值，否则互斥逻辑不生效
隐藏原生 radio 但保留可访问性
不能用 display: none 或 visibility: hidden，否则屏幕阅读器读不到、键盘 Tab 无法聚焦、:checked 伪类也可能失效。正确做法是：
- 用
appearance: none（加-webkit-appearance: none兼容旧版 Safari/Chrome）抹掉默认样式 - 配合
opacity: 0+position: absolute把它“移出可视区但保留在流中” - 加上
pointer-events: none防止它意外拦截点击（虽然 label 已接管，但保险起见） - 示例规则：
.radio-group input[type="radio"] { appearance: none; -webkit-appearance: none; opacity: 0; position: absolute; pointer-events: none; }
用 :checked + label 触发样式切换
:checked 只能作用于 input 元素本身，所以必须借助相邻兄弟选择器（+）或通用兄弟选择器（~）影响后面的 label。前提是 HTML 结构中 input 必须在 label 前面：
立即学习“前端免费学习笔记（深入）”；
- 结构必须是：
<input><label>文字</label>，不能反过来 - 选中态样式写成：
input[type="radio"]:checked + label { background: #007bff; color: white; border-color: #007bff; } - 如果 label 在 input 后面但中间隔了其他元素，
+就失效，得改用~，但要小心误匹配 - 别忘了未选中态的默认样式也要提前定义好，比如边框、圆角、过渡动画
用伪元素模拟选中指示符
纯背景色变化不够直观，用户可能看不出哪个被选中。常见做法是用 ::before 或 ::after 在 label 内部加个圆点或对勾：
- 给
label::before设content: ""、display: inline-block、尺寸和背景 - 在
:checked + label::before里控制显示/颜色，比如background: #007bff; border-radius: 50%; - 注意伪元素默认不继承
label的字体大小，需手动设font-size或用em单位适配 - 如果 label 是块级或 flex 布局，伪元素位置要用
position: absolute精确控制，避免撑开容器
最容易被忽略的是结构顺序和可访问性细节：input 必须在 label 前、不能 display:none、name 必须一致——这三处任一出错，:checked + label 就完全不响应，连调试都难定位。实际项目里建议先用最简结构验证通路，再叠样式。
