要修改layer弹窗标题栏为红色背景、白色文字,需在layui.css之后通过css覆盖.layui-layer-title类,添加!important声明确保生效:.layui-layer-title { background-color: #f44336 !important; color: #fff !important; font-weight: 600 !important; padding-left: 20px !important;}

修改layer弹窗标题的背景色与文字颜色
需要让layer弹窗顶部标题栏显示为红色背景、白色文字,且不影响其他弹窗样式,不能靠改title参数或JS动态注入HTML实现,必须通过CSS精准覆盖。
直接覆盖.layui-layer-title类(推荐)
这是最稳定、兼容性最好、无需改动JS调用的方式,适用于所有layer.open、layer.alert、layer.confirm等类型弹窗。
第一步:在页面
内或全局样式文件中插入以下CSS代码:第二步:确保该样式加载在layui.css之后——如果放在
末尾,或用引入在layui.css下方,即可生效。注意:【不加!important会失效】,因为layer内部使用内联样式设置color和background-color,优先级高于普通CSS规则。
第三步:刷新页面,任意layer.open()弹出的窗口标题都会立即呈现红底白字效果。
仅修改某类弹窗(如只改alert)
当只想让layer.alert的标题变色,而保留layer.msg、layer.confirm原样时,需利用layer内置的skin类前缀做限定。
方法一:用layer.alert自带skin前缀
layer.alert默认添加skin类名layui-layer-alert,因此只需限定选择器范围:
body .layui-layer-alert .layui-layer-title {
background-color: #ff9800 !important;
color: #212121 !important;
}
方法二:自定义skin并显式指定
调用时传入skin: 'my-alert':
layer.alert('操作成功', { skin: 'my-alert' });
对应CSS写为:
body .my-alert .layui-layer-title {
background-color: #4caf50 !important;
color: white !important;
}
这一步操作起来很简单,直接把上面两段代码复制进项目就行,不用动任何JS逻辑。
用title数组+skin强行注入HTML(慎用)
此法能实现图标+文字混排,但极易因遗漏skin配置导致title被转义成纯文本,属于高风险方案,仅在必须嵌入图标时考虑。
方法一:title传数组 + skin显式声明
必须同时满足两个条件:title是数组,且skin参数存在(哪怕值为空):
layer.open({
title: ["? 系统通知", ""],
skin: "custom-title", // 即使为空字符串也必须传
content: "欢迎使用系统"
});
然后补上CSS:
body .custom-title .layui-layer-title {
background-color: #2196f3 !important;
color: #fff !important;
}
方法二:不传skin → title内容原样显示为字符串,标签不会解析。
【漏掉skin参数会导致标题变成纯文本“? 系统通知”】











