必须覆盖.layui-form-radio[lay-skin="primary"] i伪元素;新版layui用该选择器,老版本可能用::after,需加!important且css加载在layui.css之后。

layui单选框的勾选色为什么改不了
因为Layui的单选框(lay-skin="primary")不是用原生<input type="radio">直接渲染的,而是用.layui-form-radio i或::after伪元素画出来的圆点和对勾。直接写input:checked完全无效——DOM里那个input早就被隐藏了。
必须覆盖哪个伪元素?怎么写才生效
新版Layui(v2.8+)用的是.layui-form-radio[lay-skin="primary"] i绘制选中状态;老版本(v2.7及之前)可能用::after。先查layui.version,再决定写法:
- 确认版本后,用带父级限定的选择器,比如表格里就写
.layui-table .layui-form-radio[lay-skin="primary"] i - 必须加
!important,否则Layui内联样式或高权重规则会压过你写的 - CSS要放在
layui.css之后加载,否则渲染时还没生效
示例(改选中圆点为红色):
.layui-table .layui-form-radio[lay-skin="primary"] i {
background-color: #e74c3c !important;
}
只改某几个单选框,不波及全局
全局改[lay-skin="primary"]会影响所有地方(包括弹窗、表单),想局部控制就得靠容器隔离:
- 给目标区域加自定义class:
<div class="my-radio-group"></div> - CSS写成:
.my-radio-group .layui-form-radio[lay-skin="primary"] i { background-color: #3498db !important; } - 如果用了
skin: 'row'等表格皮肤,还要补一句:.my-radio-group .layui-table-row .layui-form-radio[lay-skin="primary"] i
hover态和点击区域也要同步调
只改选中色,不调hover背景或伪元素尺寸,会导致视觉反馈错位,尤其在移动端点不中:
- 悬浮态单独处理:
.layui-form-radio[lay-skin="primary"]:hover i { background-color: #2980b9 !important; } - 确保
i的宽高足够(默认是16px),必要时显式设置:width: 18px; height: 18px; - 别漏掉表头或动态插入的单选框——它们需要重新触发
form.render('radio')
真正卡住的往往不是颜色值写错,而是选择器没命中、!important漏了、或者CSS加载时机早于Layui初始化。











