Layui表格如何修改复选框被选中时的勾选颜色-Layui教程-PHP中文网

Layui表格复选框勾选颜色改不了是因为其勾选效果由.layui-form-checkbox[lay-skin="primary"]::after伪元素绘制，需用更高优先级选择器覆盖并加!important，如.layui-table .layui-form-checkbox[lay-skin="primary"]::after{background-color:#ff5722!important}。

layui table 复选框勾选颜色为什么改不了？

因为 layui 的复选框样式是通过 .layui-form-checkbox 和伪元素 ::after 控制的，直接改 input:checked 没用——它根本没被渲染出来，真实勾选效果是 css 画的。

怎么覆盖默认的勾选颜色（以蓝色为例）

必须用更高优先级的选择器，精准命中那个小对勾的伪元素。Layui v2.8+ 默认用的是 #009688（青绿色），想改成红色或自定义色，得重写 .layui-form-checkbox[lay-skin="primary"]::after 的 background-color。

在表格渲染后或 CSS 文件末尾加这段样式（确保加载顺序靠后）：

.layui-table .layui-form-checkbox[lay-skin="primary"]::after {
  background-color: #ff5722 !important;
}

如果表格启用了 skin: 'row' 或其他皮肤，需同步检查对应类名，比如 .layui-table-row .layui-form-checkbox[lay-skin="primary"]::after
别漏掉 !important —— Layui 内联样式或高权重规则容易覆盖你写的

修改后复选框不生效的常见原因

不是代码写错，而是被环境或时机卡住了。

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

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

下载

table.render() 后才注入 DOM，CSS 提前加载会导致初始渲染仍用旧样式；建议把自定义样式放在底部，或用 setTimeout 延迟 1 帧再插入 style 标签
使用了 elem: '#id' 渲染到已有容器时，若该容器本身带 style 或 scoped CSS（如 Vue 单文件组件），会隔离作用域，导致样式失效
Layui 2.7 之前版本用的是 .layui-form-checkbox i 而非 ::after，老项目要先确认版本：layui.version

影响范围和兼容性注意点

这个改动只影响表格里的复选框，但有个隐含风险：全局所有 lay-skin="primary" 的 checkbox 都会被波及，除非加更具体的父级限定。

如果只想改某一张表，给容器加个自定义 class，比如 <table class="my-table">，然后写：<pre class="brush:php;toolbar:false;">.my-table .layui-form-checkbox[lay-skin="primary"]::after</pre> <li>IE11 不支持 <code>::after 在 input 上生效（虽然 Layui 本就不官方支持 IE），真要兼容得换回 JS 动态加 class 方案
移动端点击区域变小？记得同步调大 ::before 的宽高和 border，否则视觉勾选区和实际响应区不一致

!important