Layui单选框背景色需覆盖伪元素而非原生input：v2.7及之前改.layui-form-radio i，v2.8+改.layui-form-radio[lay-skin="primary"]::after，均需!important；hover和checked态须分别处理，动态切换应预定义CSS类并配合form.render('radio')。

layui单选框的背景色不能直接改 input[type="radio"]

因为 Layui 的单选框是用 CSS 伪元素重绘的，原始 <input type="radio"> 被隐藏了，你给它设 background-color 完全无效。真正起作用的是渲染后生成的 .layui-form-radio 容器和里面的 i 元素（v2.7 及更早）或 ::after（v2.8+）。

必须覆盖 .layui-form-radio i 或 ::after，并加 !important

不同版本写法不同，先查 layui.version 再决定用哪套规则：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

• v2.7 及之前：重点改 .layui-form-radio i，比如：

  .layui-form-radio i { background-color: #ff6b6b !important; }

• v2.8+：改 .layui-form-radio[lay-skin="primary"]::after，比如：

  .layui-form-radio[lay-skin="primary"]::after { background-color: #4ecdc4 !important; }

• 没加 !important 基本无效——Layui 内联样式或高权重选择器会把它压掉
• 如果只改某块区域（比如弹窗里的单选框），加父级 class 隔离：

  .my-dialog .layui-form-radio i { background-color: #96ceb4 !important; }

hover 和选中态要分开处理

只改默认态不够，用户悬停或点击时颜色可能回退到默认蓝。需要同步覆盖：

• 悬停态：.layui-form-radio:hover i 或 .layui-form-radio:hover[lay-skin="primary"]::after
• 选中态：.layui-form-radio[lay-type="radio"].layui-form-checked i（老版）或 .layui-form-radio[lay-skin="primary"].layui-form-checked::after（新版）
• 注意新版里 .layui-form-checked 是加在 .layui-form-radio 上的，不是 i 或伪元素本身

动态切换颜色要用 class 切换，别硬写 style

JS 里直接操作 DOM 的 style.backgroundColor 没用，因为真实渲染节点是 i 或伪元素，且每次 form.render('radio') 后都会重建。正确做法是：

• 预定义 CSS 类，比如 .radio-red、.radio-green
• 通过 layui.$('.layui-form-radio').eq(0).addClass('radio-red') 切换
• 确保调用 form.render('radio')（尤其在异步加载或动态插入后），否则新 class 不生效
• 不要用 layui.$('input[name="xxx"]').next().find('i').css(...) —— 下次 render 就丢了

真正生效的颜色控制点不在原生 input，而在那一层被精心包裹的 i 或伪元素；漏掉 hover、checked 或没加 !important，改了也白改。