不能用 display: none 隐藏原生 radio 输入框，因其会导致键盘无法聚焦、屏幕阅读器跳过、iOS Safari 失去焦点管理能力，并触发可访问性报错；正确做法是用 position: absolute 等视觉隐藏但保留语义。
为什么不能用 display: none 隐藏原生 input[type="radio"]
用了 display: none，键盘 Tab 无法聚焦、屏幕阅读器直接跳过、iOS Safari 会丢掉焦点管理能力——这不是“看不见”，是“彻底失联”。可访问性检测工具（如 axe 或 Lighthouse）会立刻报 label has no associated control 错误。
正确做法是视觉隐藏但语义保留：
-
position: absolute移出视口 -
clip: rect(0 0 0 0)（注意不是clip-path，后者不兼容旧版 Safari） -
width: 1px; height: 1px; margin: -1px; border: 0; padding: 0;进一步压缩占位 - 必须保留
id和for关联，且大小写严格一致
:checked + label::before 是唯一可靠的状态绑定路径
iOS Safari 和 Android WebView 对 input::before 的支持近乎为零——input 是替换元素，伪元素渲染权不在你手上。所有视觉层必须交给 label。
结构必须满足：同级、input 在前、label 紧邻其后、for 值匹配：
立即学习“前端免费学习笔记（深入）”；
<input type="radio" id="plan-basic" name="plan" value="basic"> <label for="plan-basic">基础版</label>
样式锚点只写这一种：
-
input[type="radio"]:checked + label::before控制外圈 -
input[type="radio"]:checked + label::after控制内点（避免混用同一伪元素切换状态） - 禁用态要同步：
input[type="radio"]:disabled + label和input[type="radio"]:disabled:checked + label::after
焦点与暗色模式必须手动接管
浏览器不会自动把 :focus 传递给 label，而 label 默认不可聚焦。不处理 = 键盘用户卡死。
加这两行就能让 Tab 键正常流转并显示焦点环：
-
label { outline: none; }（先清空默认可能冲突的 outline） input[type="radio"]:focus + label { outline: 2px solid #007bff; outline-offset: 2px; }
暗色模式下，伪元素颜色不能靠系统自动反转。必须显式声明：
- 用
@media (prefers-color-scheme: dark)重置::before边框色和::after填充色 - 禁用态灰度值要统一计算，比如
color: #6c757d→color: #495057，而非简单套opacity
移动端点击热区失效的三个常见原因
用户点不中？大概率是下面某个环节断了：
-
input没设width和height—— 即使隐藏了，它仍是事件源，尺寸为 0 就没 hit area -
label没设display: inline-block或flex，导致内部伪元素无法继承宽高 - 忘了加
pointer-events: none到input上 —— 它会盖住label的点击区域，尤其在 iOS 上表现明显
最稳的组合是：input 绝对定位 + 尺寸固定 + pointer-events: none；label 设 position: relative 为伪元素提供定位上下文，同时确保有足够 padding 作为热区。
真正难的不是画圆或变色，而是让每个像素都响应键盘、语音、触控、高对比度模式——这些细节一旦漏掉，无障碍就只是个摆设。
