不能直接给 radio 添加伪元素，因浏览器规范禁止；需隐藏原生 radio 并将样式移至关联 label，通过 position: relative + ::before/::after 实现自定义外观，同时确保可访问性与点击体验。
不能直接给 input[type="radio"] 加 ::before 或 ::after —— 所有主流浏览器都禁用这个操作，写了也白写。
为什么伪元素加不到 radio 上
浏览器明确禁止对表单控件（input、select 等）使用伪元素。哪怕你在 DevTools 里看到样式规则生效，视觉上也完全没反应。这不是兼容性问题，是规范限制。
- 必须把视觉样式“转移”到关联的
label上 - 结构推荐：
<input id="opt1" type="radio" name="theme"><label for="opt1">深色模式</label> - 若用
label包裹input，则可用label > input:checked + ::before这类写法，但可访问性略弱，不推荐
怎么隐藏原生 radio 又不破坏可访问性
用 display: none 或 visibility: hidden 会让屏幕阅读器彻底忽略它；用 opacity: 0 保留语义但可能被误点空白区域。最稳妥的是：
input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); }- 这组属性组合能确保它：不可见、不占布局、可被键盘聚焦、能被读屏软件识别
- 别只写
appearance: none—— 它在 Safari 和旧版 Firefox 下无效，且不解决布局残留问题
对勾图标定位总偏移？关键在 label 的定位上下文
input:checked + label::after 的定位依赖于 label 的 position 值。如果 label 是默认 static，::after 的 top: 50% 就会相对于整个文档流计算，极易错位。
立即学习“前端免费学习笔记（深入）”；
- 必须设
label { position: relative; padding-left: 32px; }（留出图标空间） -
label::before画圆圈：用position: absolute; left: 0; top: 50%; transform: translateY(-50%); -
input:checked + label::after画对勾：同样基于label定位，left: 4px比left: 0更稳，避免和外圈重叠 - 用 Unicode 字符
"✓"而非 SVG 或 background-image —— 免去宽高适配和抗锯齿模糊问题
点击区域小、移动端点不准？别漏掉这些细节
用户实际点击的是 label，不是看不见的 input。如果 label 内容文字太短或没设内边距，有效点击区就窄得离谱。
- 给
label加padding: 8px 12px，尤其padding-left要 ≥ 图标宽度 + 间距 - 确保
for属性和input#id严格匹配，大小写、空格都不能错 - 别用
:has()做状态联动 —— Chrome 120+ 才稳定支持，Safari 17.4 仍不支持:has(input:checked)在 label 上的触发 - 测试时务必在真机上点几次：很多安卓 WebView 对
transform: translateY(-50%)的渲染有延迟，导致对勾“跳一下”才出现
最常被忽略的一点：所有自定义样式必须配合 label 的 cursor: pointer 和焦点 outline 样式，否则键盘用户 tab 到这组控件时，根本不知道当前聚焦在哪。
