最稳妥方案是隐藏原生 radio 并用 label + ::before 伪元素重绘：input 设为 absolute+opacity0+pointer-events:none，label::before 绘制统一 UI，确保 for 关联或嵌套，添加 cursor:pointer、focus-visible/outline 和 touch-action:manipulation 保障可访问性与移动端反馈。
radio 默认样式在 Chrome/Firefox/Safari 中表现不一致
Chrome 和 Edge 用圆点加浅灰背景，Firefox 保留更原始的“机械式”凹陷圆圈，Safari 在 macOS 上带轻微高光和阴影，且点击热区略小。这种差异不是 bug，而是各引擎对 <input type="radio"> 的 UA 样式实现不同，无法通过简单 CSS 重置统一。
关键点在于：所有浏览器都默认隐藏了原生控件的 appearance，但隐藏方式、边框渲染逻辑、焦点 outline 偏移量都不一样。比如 Firefox 的 :checked 状态下圆点位置比 Chrome 高 1px，导致自定义伪元素对齐困难。
用 label + :checked + ::before 实现跨浏览器一致外观
最稳妥的做法是完全隐藏原生 radio，用其后的 <label></label> 触发状态，并通过 ::before 伪元素绘制统一 UI。必须确保 input 和 label 正确关联（for 属性或嵌套）。
-
input[type="radio"]加position: absolute; opacity: 0; pointer-events: none;彻底移出交互流 -
label::before设置display: inline-block; content: "";并定义宽高、边框、圆角 -
input:checked + label::before或input:checked ~ label::before切换伪元素背景/内圆样式 - 务必为
label添加cursor: pointer;，否则用户感知不到可点击
focus-visible 和键盘导航支持不能丢
纯视觉替换后，键盘 Tab 导航会丢失焦点指示——这是 WCAG 2.1 明确要求的可访问性红线。Firefox 和 Safari 对 :focus-visible 支持较好，Chrome 从 86+ 开始支持，但旧版需降级到 :focus。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
实操建议：
- 给
label添加outline: 2px solid #007bff;，并用outline-offset: 2px;避免遮挡自定义圆圈 - 用
@supports (focus-visible: auto)包裹:focus-visible规则，避免覆盖已有:focus - 测试时按 Tab 键确认焦点是否准确落在当前选中项的
label上，而非不可见的input
移动端 click 延迟与 active 状态反馈
iOS Safari 和 Android Chrome 在 <label></label> 上触发 click 有约 300ms 延迟，且 :active 伪类在部分安卓 WebView 中不触发。这会导致用户点击后无即时视觉反馈，误以为没点中。
解决路径：
- 给
label加touch-action: manipulation;消除延迟 - 用
label:active::before降低背景色透明度或缩放伪元素（transform: scale(0.95);）提供按下感 - 避免依赖
ontouchstartJS 监听——现代方案优先用 CSS:active+touch-action - 真机测试时注意：iOS 微信内置浏览器禁用
:active，需额外加onclick="void(0)"激活
真正麻烦的是 Safari 对 appearance: none 的兼容性：它直到 iOS 15.4 才完全支持，低版本仍会残留原生圆圈。所以“彻底隐藏 + 伪元素重绘”仍是目前最可控的底线方案。
