不能用 display: none 隐藏 radio，因其会导致表单提交丢失值；应优先用 appearance: none 配合伪元素重绘，兼容性场景可选 absolute 定位、clip-path 或 opacity 隐藏方案。
为什么不能用 display: none
加 display: none 后，表单提交时整个 radio 选项直接消失——FormData 里查不到它，form.elements 也遍历不到，哪怕用户“点过”它。浏览器把 display: none 的表单控件当作了“不存在”，不是“看不见”。这是最常踩的坑，尤其在后台管理或 JS 动态控制场景下，一藏就丢值。
appearance: none 是现代方案的核心
它解除浏览器对原生外观的控制，但保留所有语义、可访问性和表单行为。配合伪元素就能重绘圆点、状态、动画等。不过要注意：
-
appearance: none在 IE11 和 Android 4.4 WebView 中不支持 - 必须同时写
-webkit-appearance: none兼容旧版 Safari/Chrome - 隐藏后要手动补上
vertical-align或margin，否则和文字对不齐 - 若后续用
::before/::after绘制，需确保父容器有position: relative
兼容老浏览器的视觉隐藏三选一
当必须支持 IE11 或低版本 WebView 时，不能依赖 appearance，只能走“视觉隐藏 + label 模拟”路线。以下三种方式都满足：DOM 存在、JS 可读 checked、表单能提交、键盘可聚焦（可选）：
-
position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;—— 兼容性最好，但需额外加tabindex="-1"防止键盘聚焦到不可见区域 -
clip-path: inset(100%);—— 现代浏览器干净利落，不影响 tab 顺序，但 IE 完全不支持 -
opacity: 0; pointer-events: none;—— 仍占布局空间，适合你完全控制交互逻辑的场景；注意没设tabindex="-1"时，键盘用户 Tab 过去会卡住
别碰 visibility: hidden 和 aria-hidden="true"：前者让 radio 占位、可聚焦、子元素甚至可能意外显示；后者只骗读屏器，对 JS、表单提交、焦点管理毫无作用。
label 才是交互主体，别藏错对象
用户真正点击的是 label，不是 radio 本身。所以正确做法是：
- radio 用上述任一方式视觉隐藏
- 确保每个 radio 都有配套
或嵌套结构（如） -
label本身不要加pointer-events: none，否则点击失效 - 如果连
label也要隐藏（比如纯逻辑控制），那就该换思路：用+ JS 显式管理值，而不是硬藏 radio
复杂点在于：没有“一键两全”的 CSS 属性。是否需要键盘可访问、是否要兼容 IE、是否允许 JS 干预——这些都会影响你选哪条路。漏掉 tabindex 或误信 aria-hidden，都可能让隐藏变成可访问性灾难。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
