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