appearance: none 不足以美化 radio，因Firefox支持不一致、IE/Edge忽略，且清除后点击热区仅2–4px、width/height被无视；正确做法是用position: absolute; opacity: 0;隐藏但保留可访问性，并确保label显式绑定与状态联动。
为什么 appearance: none 不足以美化 radio
直接给 input[type="radio"] 加 appearance: none 看似最简，但实际会踩三个坑：Firefox 对该属性支持不一致，IE/Edge 完全忽略；即使外观清除了，点击热区仍只有 2–4px，用户几乎点不中；width/height 在大多数浏览器里被无视，无法放大可点区域。真正起效的前提是——让原生控件“隐身但不消失”。
隐藏 radio 的正确写法（无障碍关键）
必须用 position: absolute; opacity: 0; margin: 0; padding: 0;，而不是 display: none 或 visibility: hidden。前者会让屏幕阅读器完全跳过，后者仍占用布局空间且焦点不可达。同时要确保 label 显式绑定：for="id" 属性必须与 input 的 id 严格一致，或把 input 直接包在 label 内。否则键盘 Tab 无法聚焦、点击 label 也不触发选中。
用 label::before 实现圆点的最小可行结构
核心是状态联动：未选中靠 label::before 画外圈，选中靠 input:checked + label::before 填充内点。不需要 JS，纯 CSS 即可。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
input[type="radio"]：加position: absolute; opacity: 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; - 别漏掉
label::before { cursor: pointer; }，否则视觉上不像可点区域
动画和兼容性容易被忽略的细节
如果加 transition（比如 background-color 0.2s ease），注意 Firefox 旧版本不支持伪元素动画，建议只对 border-color 或 transform 做过渡。另外，所有颜色值避免用 hsl() 或透明度，部分 Android WebView 会渲染异常；圆点尺寸建议固定为偶数像素（如 16px / 18px），避免 subpixel 渲染模糊。最关键的是：无论怎么美化，input 元素本身不能脱离 DOM 流，也不能失去 focusable 状态——这是可访问性的底线。
立即学习“前端免费学习笔记（深入）”；
