list-style: none 对 radio 无效，因其非列表项；必须用 appearance: none（含 -webkit/-moz 前缀）剥离默认样式，再手动定义宽高、边框、背景等，并确保可点击、可聚焦、可读取、可缩放。
HTML 单选按钮（<input type="radio">）的“圆点”不是项目符号，而是控件本身的渲染样式；不能用 list-style: none 去掉，必须通过 CSS 重置外观。
为什么 list-style: none 对 radio 完全无效
单选按钮是表单控件，不是列表项——它不参与 ul/li 的列表样式机制。试图给 input[type="radio"] 加 list-style: none 不会产生任何效果，因为该属性只作用于 ul、ol 和 menu 等列表容器。
正确做法：用 appearance: none 彻底剥离默认渲染
现代浏览器支持 appearance 属性，它是清除原生表单控件样式的标准方式：
-
appearance: none是核心声明，会移除所有浏览器默认的 radio 圆点、边框、阴影等视觉层 - 必须配合
display: inline-block或display: flex才能继续控制尺寸和对齐 - 需要手动定义
width、height、border、background等，否则控件可能不可见 - 务必保留
cursor: pointer，否则用户无法直观感知可点击
示例：
input[type="radio"] {
appearance: none;
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid #999;
border-radius: 50%;
margin-right: 8px;
cursor: pointer;
}
input[type="radio"]:checked {
background: #007bff;
border-color: #007bff;
}
兼容性与 fallback 处理
旧版 Safari（≤15.4）和部分 Android WebView 不支持 appearance: none，需加前缀并准备降级方案：
- 写全三端前缀：
-webkit-appearance: none、-moz-appearance: none、appearance: none - 若目标环境包含 IE11 或老旧 WebView，
appearance会被忽略，此时圆点仍存在——但这是预期行为，不应强行用transform: scale(0)或opacity: 0隐藏，否则破坏可访问性 - 真正要确保的是：即使圆点未被隐藏，
:checked状态仍可通过 JS 或 ARIA 正确识别，不影响功能逻辑
别踩这些坑
常见错误操作及其后果：
- 只设
visibility: hidden或opacity: 0：控件不可见但仍在 DOM 中占位，且屏幕阅读器仍会读出“radio button”，语义混乱 - 用
background: transparent+border: none却不设appearance: none：在 Chrome/Firefox 中圆点依然顽固存在 - 忘记处理
:focus样式：键盘用户 Tab 切换时无焦点提示，违反 WCAG 2.1 - 给
label加for但没绑定id：点击标签无法触发 radio 切换，交互失效
真正难的不是“去掉圆点”，而是去掉之后，如何让自定义样式在所有设备上保持可点击、可聚焦、可读取、可缩放——这四点缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
