layui单选框圆点选中色改不了是因为真实radio被隐藏,勾选效果由伪元素(v2.8+为::after,v2.7-为i)绘制,必须用高优先级选择器如.layui-form-radio[lay-skin="primary"]::after{background-color:#2196f3!important}覆盖,并确保调用form.render('radio')生效。

layui单选框圆点选中色为什么改不了
直接写 input[type="radio"]:checked 样式完全无效——Layui 的 lay-skin="primary" 单选框是纯 CSS 伪元素绘制的,真实 input 被 display: none 隐藏了,勾选状态由 .layui-form-radio[lay-skin="primary"]::after(v2.8+)或 .layui-form-radio i(v2.7 及更早)渲染。DOM 里根本没出现 :checked 对应的真实节点。
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 { background-color: #2196f3 !important; } - CSS 文件必须在
layui.css之后加载,否则被覆盖;推荐放在底部或动态插入
v2.7 及更早版本怎么适配
先确认版本:layui.version,再写对应规则:
- v2.7–:
.layui-form-radio[lay-skin="primary"] i { background-color: #4caf50 !important; } - v2.6 及更早:结构可能混用
.layui-form-radio span,建议 F12 inspect 真实 DOM,以实际渲染出的元素为准 - hover 态要单独处理:
.layui-form-radio[lay-skin="primary"]:hover i或::after,否则鼠标移上去还是默认色
样式写了却没生效?大概率漏了这一步
Layui 表单控件依赖 form.render('radio') 才会生成最终 DOM 结构。如果你在 layer.open() 弹窗 content 里动态插入单选框,或在 table.render() 后追加表单,但没手动调用 form.render('radio'),那你的 CSS 就压根没挂到真实节点上。
- 确保已引入 form 模块:
layui.use(['form'], function(){}) - DOM 插入完成后立即执行:
form.render('radio') - 同时有复选框时可合并:
form.render('checkbox'); form.render('radio');
最常被忽略的是:选择器写对了、!important 加了、CSS 路径也没错——只是忘了 form.render('radio'),结果调半天白费劲。











