最可靠方式是隐藏原生 radio input 并用 label 承担视觉表现；opacity: 0 + position: absolute 隐藏控件但保留功能，配合 label:has(input:checked) 实现现代样式控制，兼顾可访问性与兼容性。
直接隐藏原生 input[type="radio"] 并用 label 承担视觉表现，是目前最可靠、可访问性最好的方式。别试图用 appearance: none 后再画个圆圈——它在 Safari 和旧版 Chrome 里行为不一致，且键盘焦点常丢失。
为什么不能只用 appearance: none
这个属性确实能抹掉系统默认样式，但问题在于：
-
appearance: none在 Safari 中对input[type="radio"]支持不稳定，有时仍残留部分渲染或焦点框 - 即使隐藏了外观，
::before/::after伪元素无法直接附加到input上（浏览器不支持），必须借助兄弟或父级元素 - 键盘操作（Tab → Space）时，焦点样式可能消失或错位，影响无障碍体验
- 某些安卓 WebView 中，
appearance: none完全无效，回退到丑陋原生样式
opacity: 0 + position: absolute 是更稳妥的隐藏方案
把原生控件“藏起来但保功能”，比“删掉再重画”更安全：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 给
input设置opacity: 0（不是display: none，否则无法触发点击和键盘交互） - 加
position: absolute和top: 0; left: 0;，让它和同级label重叠 - 确保
label的z-index更高，用户实际点的是label，但事件会透传给底层input - 这样既保留表单语义、屏幕阅读器识别、键盘导航，又完全掌控视觉层
用 :has() 控制父级 label 样式（现代方案）
如果你的项目支持 Safari 15.4+、Chrome 105+、Firefox 111+，可以直接用 label:has(input:checked)：
- HTML 结构必须是
<label><input type="radio" name="x">选项文本</label>（input在label内部） - CSS 写成：
label { /* 未选中样式 */ } label:has(input:checked) { /* 选中样式，比如 background-color 或 border */ } - 无需 JS，无相邻选择器限制（
input + label要求label紧跟其后），结构更自由 - 注意：IE 和旧 Edge 完全不支持，需配降级方案（如用 JS 监听
change事件加 class）
容易被忽略的关键细节
很多实现失败，不是因为 CSS 写错，而是这些点没处理好：
-
label必须包裹input或通过for属性绑定，否则点击文字不会触发选中 - 若用
input + label相邻选择器，input和label必须是 DOM 同级且label紧接其后，中间不能有空格或注释节点 - 移动端点击热区太小？给
label加padding，别只调input尺寸——input本身不可见，热区由label决定 - 同一
name组多个radio，必须确保只有一个带checked属性，否则默认选中行为不可预测
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
