正确隐藏原生 radio 的方法是用 position: absolute + left: -9999px 或 clip-path: inset(50%) 保持语义和交互；伪元素需设 content、position 和相等宽高；相邻兄弟选择器 + 更可控；label 需设最小点击区域和 cursor:pointer；焦点状态必须提供视觉反馈。
怎么彻底隐藏原生 <input type="radio"> 又不破坏可访问性
直接 display: none 或 visibility: hidden 会让屏幕阅读器忽略它，也断掉键盘操作（Tab + 空格切换）。正确做法是用视觉隐藏但保留语义和交互能力：
-
position: absolute+left: -9999px（确保脱离文档流且不可见） - 或更稳妥的
clip: rect(0 0 0 0)+clip-path: inset(50%)（现代浏览器兼容性更好） - 必须保留
id和配套的<label for="xxx">，否则点击标签无法触发选中
用 ::before 和 ::after 重绘圆点时，为什么经常只看到方块或根本没反应
伪元素默认是行内级，不支持宽高；而且必须作用在已定位的容器上。常见失效原因：
- 没给自定义容器（比如
label）设position: relative -
::before缺少content: ""（伪元素必须有 content 才渲染） - 圆点用
border-radius: 50%但宽高不相等（比如width: 16px; height: 14px→ 椭圆） - 没处理
:checked状态下的::after（即内部实心圆），只画了外圈
示例关键片段：
label::before {<br> content: ""; display: inline-block; position: absolute;<br> width: 18px; height: 18px; border: 2px solid #999;<br> border-radius: 50%; left: 0; top: 50%; transform: translateY(-50%);<br>}<br>input:checked + label::after {<br> content: ""; position: absolute;<br> width: 10px; height: 10px; background: #007bff;<br> border-radius: 50%; left: 4px; top: 50%; transform: translateY(-50%);<br>}
:checked + label 和 input:checked ~ label 选哪个？
取决于 HTML 结构。绝大多数情况用相邻兄弟选择器 + 更可控、性能略好：
立即学习“前端免费学习笔记（深入）”；
-
input必须紧挨着label（<input id="a"><label for="a">或<label><input></label>） - 如果
input在label内部（推荐写法），直接用input:checked + label::after不生效，得改成input:checked::after（但此时需确保input本身可定位） -
~是通用兄弟选择器，宽松但易误匹配；若页面有多个同级label，可能样式错乱
移动端点击区域太小、iOS Safari 不响应怎么办
原生 radio 的点击热区极小，伪元素又默认不扩大可点击范围。必须显式增强：
- 给
label设min-width: 36px; min-height: 36px（iOS 最小建议触控尺寸） - 加
cursor: pointer提示可交互 - iOS Safari 对
label包裹input的结构最友好，优先用<label><input type="radio">选项文本</label> - 避免在
label上加pointer-events: none或透明遮罩层
真正麻烦的是 focus 状态的视觉反馈 —— 很多团队只顾 hover 和 checked，忘了键盘用户按 Tab 进入时需要 outline 或自定义焦点环，这点常被跳过，但影响不小。
