Layui单选框不能直接用input:checked改颜色，核心原因是它的选中效果并不是原生radio直接绘制出来的，而是由伪元素实现的（v2.8+ 使用::after，v2.7及更早版本使用i）。原生radio通常会被隐藏，所以如果想修改Layui单选框选中颜色，必须通过高优先级选择器覆盖伪元素的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; } 不会起作用，因为当前可见的选中效果并不是由原生 input 控制的。

怎么精准覆盖单选框选中色（v2.8+ 必须这么写）

要修改 Layui 单选框颜色，必须使用带父级限制且包含 !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 之后，否则可能被默认样式覆盖；建议放在 底部或动态插入

老版本（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 元素，确认真实 DOM 结构
• hover 状态需要单独处理，可写成 .layui-form-radio[lay-skin="primary"]:hover i 或 ::after

表头/弹窗/表单里单选框颜色不统一？别漏掉 form.render()

Layui 的表单控件不是写进 HTML 后就立刻变成最终可用结构，它需要依赖 form.render() 完成二次渲染。比如在 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，效果就不会出现，最终只能白白排查半天。