layui tab滑块下划线颜色需用css覆盖,默认为#009688,推荐通过.layui-tab-brief .layui-tab-title .layui-this:after{background-color:#2e8b57!important}修改,支持动态渲染。

选中项下方的滑块下划线颜色不能通过 layui 内置配置修改,需用 CSS 覆盖默认样式。该滑块由 `.layui-tab-brief .layui-tab-title .layui-this:after` 生成,颜色值默认为 #009688(青绿色),可通过重写 `border-color` 或 `background-color` 控制。
直接覆盖滑块颜色(推荐)
在页面 `
- 针对简洁风格(
lay-skin="brief"):
.layui-tab-brief .layui-tab-title .layui-this:after { background-color: #2E8B57 !important; }
- 若使用卡片或默认风格,替换选择器为:
.layui-tab-card .layui-tab-title .layui-this:after或.layui-tab .layui-tab-title .layui-this:after - 必须加
!important,否则被 layui 内联样式覆盖 - 用
background-color更稳妥(brief 滑块是伪元素背景,非 border)
适配不同皮肤与状态
若需统一处理所有 skin 类型,可合并写法:
.layui-tab .layui-tab-title .layui-this:after { background-color: #1E90FF !important; }- 该写法对
brief、card、default均生效,但 brief 下更明显 - 不建议改
height或width,易破坏居中逻辑;如需加粗,可设height: 3px
动态切换时颜色同步更新
如果 tab 是 JS 动态添加的,CSS 规则仍自动生效;但若页面加载后才引入样式,建议在渲染后调用:
-
layui.element.render('tab')—— 确保新样式参与重绘 - 无需监听事件或手动操作滑块 DOM,纯 CSS 驱动











