单选按钮在手机上点不准是因为原生radio默认触控热区仅12–16px，远低于推荐的44×44px；应通过label包裹input并设置块级样式扩展点击区域，隐藏原生控件时需保留语义与焦点逻辑，且同组radio必须name属性完全一致。
单选按钮 <input type="radio"> 为什么在手机上点不准
因为原生 <input type="radio"> 的默认触控热区太小（通常仅 12–16px），远低于移动端推荐的最小触控目标 44×44px。用户必须精准点击圆点本身，稍偏就失效——这不是 bug，是规范行为。
常见现象：点击标签文字没反应、连点两下才选中、误触相邻选项。
- 不要给
<input>直接设width/height，这会破坏语义且不提升可点区域 - 不要只靠
padding扩展<input>自身，它对触控热区无效 - 真正有效的是让点击区域“绑定”到整个可读内容块（文字 + 圆点）
用 <label></label> 包裹实现零 JS 触控扩展
最简、最可靠的方式：把 <input type="radio"> 完全包裹进 <label></label>，并确保 for/id 关系正确（或直接省略，靠包裹关系隐式关联）。
<label class="radio-item"> <input type="radio" name="theme" value="dark"> 深色模式 </label>
这样点击“深色模式”任意位置都会触发该 radio。再配合 CSS 把整个 <label></label> 设为块级、加内边距，就能轻松达到 44px 高度：
-
display: block或display: flex确保 label 占满行宽 -
padding: 12px 16px（上下 ≥12px → 总高 ≥44px） - 避免给
<input>设margin或position: absolute导致脱离文档流，影响 label 包裹范围
隐藏原生圆点但保留语义和焦点逻辑
视觉上想自定义圆点样式？可以隐藏原生控件，但不能用 display: none 或 visibility: hidden——这会让屏幕阅读器和键盘 Tab 失效。
正确做法是用 clip-path 或 position: absolute + opacity: 0 移出可视区，同时保持可聚焦、可读取：
label.radio-item input[type="radio"] {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
}
之后用 ::before/::after 在 label 上绘制自定义圆点，并通过 :checked 和 :focus 伪类控制状态样式。
- 务必测试键盘 Tab 切换和空格/回车选中是否正常
- 避免用
pointer-events: none在 input 上，它会阻断所有交互 - Android WebView 中部分老版本对
opacity: 0支持不稳定，可加transform: scale(0)兜底
多个 radio 组之间别漏掉 name 一致性
移动端常因动态渲染或组件复用导致不同组 radio 的 name 值重复，结果点一个，其他组也跟着变——这是真实发生过的线上问题。
检查点：
- 每组 radio 必须有唯一且一致的
name值，比如name="payment-method"，不能写成name="paymentMethod"和name="payMethod" - 服务端模板或前端框架（如 React/Vue）生成时，确认
name是硬编码或受控变量，不是随机 ID - 用 Chrome DevTools 的 Elements 面板搜索
type="radio"，快速验证同组所有节点name属性是否完全相同
触控区域再大，name 错了也是白搭——选中逻辑由浏览器按 name 分组实现，和样式无关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
