Layui单选框不能直接用input:checked改颜色是因为其勾选效果由伪元素（v2.8+为::after，v2.7-为i）绘制，原生radio被隐藏；必须用高优先级选择器覆盖伪元素background-color并加!important，且需配合form.render('radio')生效。
layui单选框为什么不能直接用 input:checked 改颜色
因为 Layui 的 lay-skin="primary" 单选框是纯 CSS 伪元素绘制的，真实 input[type="radio"] 被隐藏了，勾选效果由 .layui-form-radio[lay-skin="primary"]::after（v2.8+）或 .layui-form-radio i（v2.7 及更早）实现。直接写 input:checked { background-color: red; } 完全无效——DOM 里根本没渲染那个勾选状态。
怎么精准覆盖单选框选中色（v2.8+ 必须这么写）
必须用带父级限定、带 !important 的选择器，且目标是伪元素：
.layui-form-radio[lay-skin="primary"]::after { background-color: #2196f3 !important; }- 如果只改某块区域（比如弹窗里的单选框），加容器 class 隔离：
.my-dialog .layui-form-radio[lay-skin="primary"]::after { background-color: #ff5722 !important; } - 若用了表格
skin: 'row'，还要补一句：.layui-table-row .layui-form-radio[lay-skin="primary"]::after - CSS 必须在
layui.css之后加载，否则被覆盖；推荐放在<head>底部或动态插入
老版本（v2.7 及之前）怎么适配
先查 layui.version，再决定写法：
- v2.7–：用
i元素：.layui-form-radio[lay-skin="primary"] i { background-color: #4caf50 !important; } - v2.6 及更早：可能还混用
.layui-form-radio span，建议 inspect 元素确认真实结构 - hover 态要单独处理：
.layui-form-radio[lay-skin="primary"]:hover i或::after
表头/弹窗/表单里单选框颜色不统一？别漏掉 form.render()
Layui 表单控件依赖 form.render() 才会生成最终 DOM 结构。如果你在 table.render() 后加了单选框，或在 layer.open() 的 content 里动态插入了单选框，但没手动调用 form.render('radio')，那你的样式就压根没机会作用到真实节点上。
- 确保已引入
form模块：layui.use(['form'], function(){...}) - DOM 插入完成后立即执行：
form.render('radio') - 如果同时有复选框和单选框，可合并调用：
form.render('checkbox'); form.render('radio');
最常被忽略的是：样式写对了，!important 也加了，路径也没错——只是忘了 render，结果白调半天。
