直接改.layui-form-radio i样式会失效，因为layui 2.8+动态插入i元素并带内联样式，且form.render()会重置自定义样式；需在layui.css后、layui.js前加载带!important的css，并同步处理选中/未选中状态及伪元素定位。
直接改.layui-form-radio i样式会失效？原因在这里
因为 layui 2.8+ 的 radio 渲染逻辑里，i 元素是动态插入的，且带内联样式（比如 top: 0; width: 16px;），直接在 CSS 里覆盖容易被覆盖或错位。更关键的是：如果你没禁用 layui 自动渲染，后续调用 form.render('radio') 会把你的样式重置掉。
- 务必在引入
layui.css后、layui.js前加载自定义 CSS，否则权重不够 - 所有图标相关样式必须加
!important，尤其是width、height、background-color - 不要只改未选中状态，
.layui-form-radioed i和伪元素::before/::after必须同步处理，否则选中时显示异常
layui-form-radioed i::before 画对号失败？检查这几个点
layui 默认用两个旋转的 ::before/::after 拼成对号 ✅，但很多项目换图标后只看到一条横线或完全空白——大概率是伪元素定位崩了。
-
top和left值必须配合你设的width/height调整，比如把图标放大到 20px，top: 8px就可能偏高 -
transform: rotate(-45deg)和rotate(-135deg)不能删，这是构成对号的关键角度 - 如果用 Unicode 字符（如
\e60c）替代伪元素，得把::before内容清空，并确保font-family: "layui-icon"生效
想换成 SVG 或图片图标？别塞进 i 里
强行在 i 标签里写 <svg>...</svg> 或 <img src="..."> 会导致布局错乱，因为 layui 的 JS 会重置 i 的 innerHTML。
- 正确做法：隐藏原生
i，用绝对定位在同位置盖一层自定义图标容器 - CSS 示例：
.layui-form-radio i { display: none; } .layui-form-radio .my-radio-icon { position: absolute; top: 0; left: 0; width: 18px; height: 18px; background: url(./radio-checked.svg) no-repeat center; } - HTML 结构需手动补：
<div class="layui-form-radio"> <i></i><span class="my-radio-icon"></span><div>选项</div> </div>
表单重渲染后图标还原？绑定时机错了
调用 form.render() 或 form.render('radio') 后，你加的自定义类或样式全没了——这不是 bug，是 layui 的 DOM 替换机制导致的。
- 不要在页面加载完就一次性写 CSS，而要在每次
form.render()后，用setTimeout延迟 0ms 再补一次样式类 - 更稳妥的方式：监听
form.on('radio')事件，在回调里重新 patch 图标节点 - 如果用模块化加载（
layui.use(['form'], ...)），确保自定义样式代码在form.render()调用之后执行
i 元素、直接替换 DOM 结构的做法，在 layui 表单生命周期里都容易被冲掉。
