Layui表格如何修改复选框选中时的勾选颜色
作者：袖梨
2026-07-24
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 内联样式或高权重规则容易覆盖你写的
修改后复选框不生效的常见原因
不是代码写错，而是被环境或时机卡住了。
-
table.render()后才注入 DOM，CSS 提前加载会导致初始渲染仍用旧样式；建议把自定义样式放在<head>底部，或用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">，然后写：.my-table .layui-form-checkbox[lay-skin="primary"]::after
- IE11 不支持
::after在input上生效（虽然 Layui 本就不官方支持 IE），真要兼容得换回 JS 动态加 class 方案 - 移动端点击区域变小？记得同步调大
::before的宽高和border，否则视觉勾选区和实际响应区不一致
!important 少打了。 
