必须将 置于 内或用 for 绑定，隐藏时用 position: absolute; opacity: 0; 而非 display: none，伪元素加在 label::before 上，用 border-radius: 50% 实现实心圆，input[type="radio"]::before 不生效是规范限制。
如何用 :checked + ::before/::after 替换原生单选框图标
直接隐藏原生 ，用其后紧跟的 或父容器承载自定义样式。关键不是“画一个新图标”，而是让伪元素的显隐完全受 :checked 控制。
- 必须把
放在内部，或用for属性绑定id，否则点击无效 -
本身需设置position: absolute; opacity: 0; width: 0; height: 0;（不能只用display: none，否则失去可访问性和 :checked 状态） - 伪元素要加在
label::before上，而不是input::before—— 原生表单控件不支持伪元素 - 选中态图标建议用
border-radius: 50%+background实现实心圆，比 SVG 或字体图标更轻量、无加载延迟
为什么 input[type="radio"]::before 完全不生效
浏览器明确禁止对原生表单控件（、、）使用 ::before/::after。这是规范行为，不是 bug，也不是兼容性问题。
- 试图写
input[type="radio"]::before { content: "✓"; }—— 浏览器直接忽略，控制台无报错 - 想用
appearance: none解决？它只移除默认样式，仍不开放伪元素入口 - 真正可行路径只有一条：把视觉层和逻辑层分离——
负责状态，或其子元素负责渲染
自定义图标时 margin 和 vertical-align 对齐失效的原因
伪元素默认是 inline 级别，且基线对齐（baseline），和文字混排时极易偏移。这不是代码写错了，是 CSS 行内格式化上下文的固有表现。
- 给
label::before加vertical-align: middle通常不够，因为middle是相对于父元素小写字母 x 高度的中间，不是绝对居中 - 更可靠的做法：设
display: inline-block+vertical-align: -0.125em（微调经验值），或干脆用display: flex包裹整个label内容 - 避免用
margin-top死调——不同字体、字号下偏移量会变，维护成本高
移动端点击区域过小导致误操作的修复方式
隐藏原生 后，如果只靠伪元素那 16px 的圆点响应点击，手指根本点不准。必须扩大热区，但又不能影响布局流。
- 不要给
label::before直接加大width/height—— 图标会变形，且无法区分“点击图标”和“点击文字” - 正确做法：给
label设置padding-left: 28px（预留图标位置），再把label::before的left: 0定位到 padding 区内 - 同时确保
label的min-height≥ 44px（iOS 推荐最小触控尺寸），必要时加touch-action: manipulation
实际效果是否稳定，取决于你有没有把状态逻辑（:checked）和视觉呈现（伪元素）彻底解耦。最容易被忽略的是：所有交互响应都必须落在可聚焦、可键盘操作的元素上——哪怕它看起来只是个图标。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
