不能用 display: none 或 visibility: hidden 隐藏 radio，否则破坏可访问性；应采用视觉隐藏（如 clip-path: inset(50%)）+ 伪元素重绘 + :checked 控制状态，确保键盘操作、屏幕阅读器和语义完整性。
不能直接用 display: none 隐藏 ，否则键盘操作（Tab + 空格）和屏幕阅读器都会失效；真正可用的自定义方案，是靠视觉隐藏 + 伪元素重绘 + :checked 控制状态。
为什么 display: none 和 visibility: hidden 必须避免
这两种方式会让元素完全脱离可访问性树：Tab 键无法聚焦、空格无法切换、NVDA/JAWS 等读屏软件直接跳过。即使你加了 label，点击仍能选中，但无障碍支持已断裂。
正确做法是保留语义和交互能力：
-
position: absolute; left: -9999px;—— 兼容性好，但要确保父容器没overflow: hidden -
clip-path: inset(50%);—— 更现代、更稳妥，Chrome/Firefox/Safari 均支持（2026 年已无兼容顾虑） - 必须保留
id和配套的，否则点击标签不会触发选中
:checked + label::before 是核心选择器链
这个组合决定了样式能否随选中状态实时更新。关键点在于 HTML 结构必须是「input 紧邻 label」，且 input 在前：
<input type="radio" name="theme" id="theme-dark"><label for="theme-dark">深色模式</label>
如果结构写成 label 包裹 input，就得改用 label > input:checked + ::before 这类嵌套写法，反而更难控制定位。
常见错误：
- 漏写
content: ""→ 伪元素不渲染，圆点根本不出现在页面上 -
::before容器没设position: relative→ 后续::after的绝对定位会错位 - 宽高不等却设
border-radius: 50%→ 得到的是椭圆，不是圆点
动画与焦点反馈不能省略
纯静态圆点只是“看起来像”，但真实表单需要响应用户操作。以下三类状态建议都覆盖：
-
:checked + label::after：画实心圆点，推荐用background-color而非content字符，更易控制大小和抗锯齿 -
:focus + label::before：加box-shadow或边框高亮，让键盘用户清楚当前焦点在哪 -
:hover + label::before：轻微缩放或边框变色，提升鼠标悬停反馈（注意别和:focus冲突）
动画建议用 transform: scale() + transition，比改变 width/height 更性能友好。例如：
input[type="radio"] + label::before {
transition: transform 0.2s ease;
}
input[type="radio"]:checked + label::before {
transform: scale(1.15);
}
移动端点击区域和可访问性细节
很多自定义 radio 在手机上点不准，问题常出在两点：
-
label没设最小尺寸（min-width: 44px; min-height: 44px），iOS Safari 默认点击热区太小 - 没加
cursor: pointer，导致用户不确定是否可点击 - 未处理
:disabled状态，禁用时仍显示 hover 效果，造成误导
另外，aria-checked 属性无需手动加——浏览器会自动同步原生 input 的状态到关联 label 上，前提是结构合规、ID 正确。
最易被忽略的是焦点管理：如果一组 radio 用 tabindex="-1" 去掉默认焦点，又没手动实现键盘导航逻辑，就会让键盘用户彻底卡住。保持原生 tabindex 行为，是最简单也最可靠的做法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
