用::before或::after替换原生单选按钮需两步：先设appearance:none清空默认样式并隐藏input（display:none），再用label::before绘制自定义圆圈；因input是替换元素，伪元素不生效，故推荐:checked+label::before方案，确保兼容性。
怎么用 ::before 或 ::after 替换原生单选按钮
原生 <input type="radio"> 无法直接改背景色或形状，浏览器强制渲染为圆点。必须先隐藏默认样式，再用伪元素重建视觉层。
关键动作只有两步：设 appearance: none（或 -webkit-appearance: none）清空默认 UI；再用 ::before 绘制自定义圆圈和选中态。
-
appearance: none是核心，不加这句，::before会被原生控件压在下面，完全不可见 - 必须给
input设position: relative，否则::before的absolute定位会相对于父容器偏移 -
::before需显式设置content: ""，否则不渲染；宽高、边框、背景都得手动写死
为什么 :checked + label::before 比 input::before 更可靠
直接对 input 用伪元素，在部分旧版 Safari 和 Firefox 中不生效——它们不支持对替换元素（replaced element）如 input 添加 ::before。
更稳的解法是把 input 放进 label 里，或用 for 关联，然后用相邻选择器监听状态变化：
立即学习“前端免费学习笔记（深入）”；
input[type="radio"] { display: none; }
input[type="radio"]:checked + label::before {
background-color: #007bff;
}
label::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid #999;
border-radius: 50%;
margin-right: 8px;
}
- 必须用
display: none彻底隐藏input，仅靠appearance: none不够，有些浏览器仍占布局空间 -
label必须紧跟input（顺序不能反），否则+选择器失效 - 若用
for关联，label就不在input后面，得改用:has()，但目前 Chrome 120+ 才稳定支持，别在生产环境强依赖
border-radius 和 box-shadow 在 radio 伪元素里的表现差异
圆角本身没问题，但阴影容易出错：如果只给 ::before 加 box-shadow，选中态切换时可能有闪烁或偏移；如果同时控制 background 和 border，又容易让视觉反馈不清晰。
- 推荐用双层伪元素：
::before画外圈（带阴影），::after画内点（选中时显示），避免重绘冲突 -
box-shadow: 0 0 0 3px rgba(0,123,255,0.25)这种扩散阴影比outline更可控，不会触发浏览器焦点环逻辑 - 别用
transform: scale()做选中动画——某些安卓 WebView 下会模糊，改用opacity或background-color渐变更稳
移动端点击区域太小导致误操作怎么办
自定义后常把视觉尺寸做小（比如 16px 圆圈），但手指点击精度有限，touch-action 和实际可点范围没同步更新，就会点不中。
- 必须给
label设min-height: 44px（iOS 推荐最小触控区），并用padding把点击热区撑开，而不是只靠::before大小 - 加
touch-action: manipulation到label，防止 iOS Safari 延迟 300ms 点击响应 - 别用
pointer-events: none在伪元素上——它会让整个点击失效，哪怕label本身可点
伪元素不是万能画布，它依附于真实 DOM 节点的行为逻辑。样式越花哨，越要检查 focus 状态、键盘导航、屏幕阅读器播报是否还正常——这些地方最容易被忽略。
