如何修改layui tips样式
时间: 2023-11-07 15:06:30 浏览: 52
要修改 layui tips 的样式,可以使用 CSS 样式来实现。以下是一个示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui Tips 样式修改</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/css/layui.min.css">
<style>
/* 修改背景颜色 */
.layui-layer-tips {
background-color: #f0f0f0;
}
/* 修改字体颜色 */
.layui-layer-tips .layui-layer-content {
color: #333;
}
/* 修改箭头颜色 */
.layui-layer-tips .layui-layer-TipsG {
border-top-color: #f0f0f0;
}
/* 修改箭头位置 */
.layui-layer-tips .layui-layer-TipsG {
left: 10px;
}
</style>
</head>
<body>
<button class="layui-btn" id="test">测试</button>
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.min.js"></script>
<script>
layui.use(['layer'], function () {
var layer = layui.layer;
// 点击测试按钮弹出 tips
layer.tips('这是一个测试', '#test');
});
</script>
</body>
</html>
```
在样式中,我们可以通过修改 `.layui-layer-tips`、`.layui-layer-tips .layui-layer-content`、`.layui-layer-tips .layui-layer-TipsG` 等类的属性来实现对 layui tips 样式的修改。在示例中,我们修改了背景颜色、字体颜色、箭头颜色和箭头位置。