必须用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 彻底剥离原生样式
这是唯一可靠的方式，但要注意三件事：
-
appearance: none必须配合-webkit-appearance: none和-moz-appearance: none才能在 Safari 和 Firefox 里生效 - 去掉默认样式后，
width、height、border、background得手动补全，否则控件可能“消失” - 别忘了加
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 规则。
