最稳妥方案是隐藏原生 radio 并用 label+伪元素自定义圆点，因 appearance: none 兼容性差且不扩大热区；需用 position: absolute + opacity: 0 隐藏而非 display: none，确保无障碍支持。
直接用 CSS 隐藏原生 <input type="radio">，再用 label + ::before/::after 画自定义圆点，是最稳妥、无障碍兼容性最好的方案。
为什么不能只靠 appearance: none
这个属性在 Chrome/Safari 对 radio 支持尚可，但 Firefox 表现不一致，IE/Edge 完全忽略；更关键的是，即使清除了外观，radio 的点击热区仍极小，用户实际体验没改善。单纯加 width/height 也无效——浏览器会无视这些样式。真正起效的路径是：隐藏它，但不销毁它。
- 必须用
position: absolute; opacity: 0;（不是display: none），否则屏幕阅读器和键盘Tab焦点会丢失 -
label必须显式绑定：for="id"或包裹input，否则点击无响应 - 伪元素要加
cursor: pointer，否则视觉上不像可点区域
radio 自定义圆点的最小可行 CSS 结构
核心是三个状态联动：input 隐藏 → label 承担点击 → label::before 绘制未选中态 → input:checked + label::before 切换选中态。不需要 JS。
- 给
input[type="radio"]加：position: absolute; opacity: 0; margin: 0; padding: 0; - 给关联的
label加：position: relative; padding-left: 28px; cursor: pointer; -
label::before画外圈：content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border: 2px solid #999; border-radius: 50%; -
input:checked + label::before填充内点：background-color: #007bff; border-color: #007bff;
容易被忽略的可访问性细节
美化后若不处理，键盘用户按 Tab 可能看不到焦点框，屏幕阅读器可能读不出选项含义。
- 保留原生
input的id和name，别用 JS 动态生成替代控件 - 确保每个
label有明确文本，避免仅靠图标传达“男/女”等语义 - 可加
input:focus + label::before { box-shadow: 0 0 0 2px #007bff; }提供键盘焦点视觉反馈 - 不要删掉
for属性或aria-labelledby—— 这些是语音朗读的关键钩子
最复杂的点不在画圆点，而在于让「隐藏」和「可操作」同时成立：DOM 里得有它，视觉上得像新做的，键盘和屏幕阅读器还得认它。少一步，就有人用不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
