彻底隐藏单选按钮原生圆点应使用 appearance: none 并配合 border、background 等重绘属性，同时用 label 包裹 input 并通过伪元素自定义样式，确保可访问性与跨浏览器兼容性。
如何彻底隐藏单选按钮的原生圆点
直接设置 appearance: none 是最干净的方式，但必须配合 border、background 等重绘属性，否则在部分浏览器（尤其是 Safari）中会变成不可见且不可交互的“幽灵控件”。Chrome 和 Firefox 支持较好，Safari 15.4+ 才稳定支持 appearance: none 对 的生效。
常见错误是只写 appearance: none 就以为完事了——结果点击无响应、焦点丢失、甚至整个按钮组失效。必须补全基础可访问性样式：
-
position: relative为后续自定义伪元素定位打基础 - 显式设置
width和height（不能依赖默认值） - 加上
cursor: pointer，否则用户无法直观识别可点击区域 - 保留
:focus-visible样式，避免键盘导航时失去焦点指示
用 ::before/::after 绘制自定义圆点的正确姿势
不能直接在 input 上画圆点，因为伪元素无法附加到表单控件上（input 是替换元素）。必须用标签包裹，比如 包住 ，再对 label::before 或 label::after 做样式。
推荐结构：
<label class="radio-label"> <input type="radio" name="theme" value="dark"><span>深色模式</span> </label>
关键点：
- 把
input设为position: absolute; opacity: 0; pointer-events: none，既隐藏又保功能 - 在
.radio-label::before里用border-radius: 50%+border或background画外圈和内点 - 用
input:checked + span::before（或input:checked ~ span::before）控制选中态，避免 JS 干预 - 注意
vertical-align: middle或display: flex; align-items: center对齐文字和圆点
保持可访问性不掉链子的关键配置
隐藏原生控件后，屏幕阅读器可能跳过或误读。必须补足语义和交互反馈：
-
input本身不能丢name和value，这是表单提交的基础 - 给
label加for属性并匹配input的id，或保持嵌套结构（嵌套时for可省略） - 用
aria-checked="true/false"配合 JS 动态更新（如果手动切换状态），但纯 CSS 方案下靠:checked已足够 - 键盘操作（Tab → Space）必须触发选中，测试时别只靠鼠标点——很多“看起来正常”的样式在键盘下完全失能
- 高对比度模式下，自定义圆点颜色需满足 WCAG 4.5:1 对比度，别用浅灰配白底
IE11 兼容？别费劲了，但得知道断点在哪
appearance: none 在 IE11 完全无效，::before 伪元素也无法作用于 input。如果真要兼容，唯一可行路径是完全放弃原生 input，改用 div + ARIA + JS 模拟，成本远高于收益。
现实建议：
- 检查项目真实 UA 数据：现在绝大多数企业级项目已明确不支持 IE11
- 若必须支持，用
@supports not (appearance: none)写降级样式，显示原生圆点但加一点美化（如微调transform: scale()） - 注意 Safari iOS 15.0–15.3 存在
appearance: none渲染 bug，圆点偶尔闪现，加transform: translateZ(0)可缓解
最易被忽略的是 focus 样式在移动 Safari 中的“点击穿透”问题：伪元素盖住了 input，但 :focus 样式没触发。解决方案是给 label 加 tabindex="0" 并监听 keydown，不过这已跨入 JS 边界——纯 CSS 方案在此处天然有缺口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
