layui复选框勾选颜色改不了是因为其勾选效果由.layui-form-checkbox[lay-skin="primary"]::after伪元素绘制，必须用更高优先级选择器覆盖并加!important，如.layui-table .layui-form-checkbox[lay-skin="primary"]::after{background-color:#ff5722!important}。
直接改 input:checked 没用，layui 的复选框是纯 css 画的伪元素，必须精准覆盖那个 ::after 或 i 元素，且几乎离不开 !important。
为什么改了 background-color 还是蓝色？
因为 Layui v2.8+ 默认用 .layui-form-checkbox[lay-skin="primary"]::after 绘制勾选图标，它的 background-color 是内联或高权重样式写的。你写的规则若选择器不够具体、没加 !important、或加载时机早于 Layui CSS，就完全无效。
- 必须用带父级限定的选择器，比如表格里就写
.layui-table .layui-form-checkbox[lay-skin="primary"]::after -
!important不是可选项，是必填项 - 确保这段 CSS 在
layui.css之后加载（放在底部，或动态插入） - 老版本（v2.7 之前）用的是
.layui-form-checkbox i，先查layui.version再决定写法
怎么只改某一张表的复选框颜色？
全局改会波及所有 lay-skin="primary" 复选框，包括弹窗、表单里的。想局部生效，就得靠容器 class 隔离。
- 给表格容器加自定义 class：
<table class="my-order-table"></table> - CSS 写成：
.my-order-table .layui-form-checkbox[lay-skin="primary"]::after { background-color: #e74c3c !important; } - 如果表格启用了
skin: 'row'，还要补一句：.my-order-table .layui-table-row .layui-form-checkbox[lay-skin="primary"]::after
表头全选框颜色不生效？别漏掉 form.render()
表头那个全选框是独立于 table 模块渲染的，即使 table.render() 执行了，它也不会自动美化——必须手动触发 form.render('checkbox')，否则你写的样式根本没机会作用到真实 DOM 上。
- 确保已引入
form模块：layui.use(['table', 'form'], function(){...}) -
table.render()完成后，立刻调用：form.render('checkbox') - 样式要匹配
.layui-form-checked[lay-skin="primary"] i（注意是i，不是::after），并加!important - 悬浮态也要单独处理：
.layui-form-checkbox[lay-skin="primary"]:hover i
移动端点击区域太小怎么办？
只改勾选色，不调大伪元素尺寸，会导致视觉勾选区和实际可点区域不一致，尤其在手机上容易点不中。
- 同步调整
::before的宽高和边框：.layui-form-checkbox[lay-skin="primary"]::before { width: 18px; height: 18px; border-width: 2px; } - 勾选图标
::after的大小最好也对齐：.layui-form-checkbox[lay-skin="primary"]::after { width: 8px; height: 4px; } - 这些值要和你项目整体 UI 尺寸协调，不能只盯着颜色
真正卡住人的从来不是颜色值写错，而是没意识到：那个“勾”根本不是 input 自身，而是框架用 CSS 画出来的；而它是否被渲染、是否被你的样式命中、是否在正确时机生效——这三步里只要一步断掉，颜色就永远变不了。
