layui单选框如何去掉前面的小圆点

必须用appearance: none剥离原生样式，配合-webkit-appearance: none和-moz-appearance: none；去除后需手动设置width、height、border等属性，并确保name相同的radio组互斥有效。

不能用 list-style: none 去掉 layui 单选框前面的圆点——它根本不是列表项，这个属性对 <input type="radio"> 完全无效。

为什么直接加 list-style: none 没反应

单选框是表单控件，不是 <li>，浏览器压根不把它当列表处理。你给 input[type="radio"] 写 list-style: none，CSS 引擎直接忽略，连解析都不解析。

必须用 appearance: none 彻底剥离原生样式

这是唯一可靠的方式，但要注意三件事：

1. appearance: none 必须配合 -webkit-appearance: none 和 -moz-appearance: none 才能在 Safari 和 Firefox 里生效
2. 去掉默认样式后，width、height、border、background 得手动补全，否则控件可能“消失”
3. 别忘了加 cursor: pointer，不然用户看不出能点

示例：

input[type="radio"] {-webkit-appearance: none;-moz-appearance: none;appearance: none;display: inline-block;width: 16px;height: 16px;border: 2px solid #ccc;border-radius: 50%;margin-right: 6px;cursor: pointer;}input[type="radio"]:checked {background: #009688;border-color: #009688;}

旧版 Safari 或 Android WebView 不支持 appearance 怎么办

≤ Safari 15.4 或部分 WebView 会忽略 appearance，此时圆点仍存在——这不是 bug，是预期行为。强行用 opacity: 0 或 transform: scale(0) 隐藏，会破坏屏幕阅读器识别和键盘聚焦逻辑。

真正要保证的是：:checked 状态仍能被 JS 正确读取，且 tab 切换时有清晰的 :focus 样式（比如加个 outline 或 box-shadow）。

最常被忽略的一点：哪怕你重置了外观，也得确保同 name 的 radio 组里至少有一个能被选中——Layui 不干预这个行为，它只是渲染层，底层还是原生 radio 规则。