HTML单选按钮的圆点无法用CSS直接“去掉”，因其是控件固有渲染部分；唯一可行方案是：用appearance: none（需兼容前缀）清空样式后自定义，或用position: absolute + opacity: 0隐藏原生input，再通过label+::before绘制并用:checked切换状态。
HTML单选按钮的圆点根本不能用 CSS 直接“去掉”
这不是浏览器 bug，而是规范行为：input[type="radio"] 的圆点是表单控件的**固有渲染部分**，不是通过 list-style 或 background 生成的装饰。所有主流浏览器（Chrome、Firefox、Safari、Edge）都不支持用 appearance: none 以外的方式直接隐藏它——而 appearance: none 本身只是移除系统样式，不等于“清空视觉”，后续必须手动补全交互反馈。
真正可行的方案只有两种：appearance + 自定义，或隐藏 + label 模拟
想保留原生语义和可访问性，又让圆点消失，必须走“视觉替换”路线：
-
appearance: none是起点，但仅在现代浏览器生效；老版 Safari 需加-webkit-appearance: none，Firefox 需-moz-appearance: none - 之后必须显式设置
width、height、border、background等，否则控件会塌缩成不可见或尺寸异常 - 更稳妥的做法是把
input设为position: absolute; opacity: 0;，再用相邻label绘制自定义图标，并靠:checked伪类切换状态 - 别忘了用
for属性或嵌套结构绑定label和input，否则点击无响应
为什么 list-style: none 对 radio 完全无效？
因为 list-style 只作用于 ul、ol、li 元素，跟 input 毫无关系。网上搜到的“给 radio 加 list-style: none”全是误传——它既不会报错，也不会生效，纯属浪费一行 CSS。
同理，display: inline-block、text-indent、padding-left 这些对文本对齐有效的属性，在 input[type="radio"] 上最多影响其周围布局，绝不会碰触那个圆点。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的关键细节
即使你用 appearance: none 成功隐藏了圆点，以下三点仍可能让你的单选框“看起来像坏了”：
- 没设
cursor: pointer→ 用户看不出能点 - 没处理
:focus样式 → 键盘 Tab 导航时焦点不可见，违反 WCAG - 没同步
:checked和未选中状态的视觉差异 → 用户无法确认当前选中项 - 没测试屏幕阅读器行为 → 隐藏后若未保留
aria-checked或正确语义结构，视障用户将丢失状态信息
真正的“去除圆点”，本质是放弃默认渲染、接管全部视觉与交互责任。没有捷径，也没有一劳永逸的 reset.css 规则。
