Layui 修改表格样式

2023-06-06T11:54:52

1 基本背景

body {
    background-color: #b200ff; /*黑色*/
}

2 表格字体

.layui-table {
    color: #F8F8FB; /* 所有字体颜色 */
    background-color: transparent;
}

页导航 …颜色

.layui-laypage .layui-laypage-spr {
    color: #0f0; 
}

4 第几页中间输入看字体颜色

.layui-input {
    color: #f00;
}
.layui-table thead tr, .layui-table-click,
.layui-table-header, .layui-table-mend,
.layui-table-patch, .layui-table-tool, .layui-table-total,
.layui-table-total tr,
.layui-table[lay-even] tr:nth-child(even) {
   /* background-color: #2DA80F; 绿色*/
    background-color: transparent;
}
.layui-table tbody tr:hover, .layui-table thead tr, .layui-table-click, 
.layui-table-header, .layui-table-hover, .layui-table-mend, .layui-table-patch, 
.layui-table-tool, .layui-table[lay-even] tr:nth-child(even) {
    background-color: transparent;
}

5 头部和行的颜色


.layui-table thead tr {
    /*background-color: #0094ff; 蓝色*/
    background-color: transparent;
}

6 行选中后,颜色


/*.layui-table-hover {
    color: #0094ff; 
}*/
1234

7 到第、页 文字颜色


.layui-laypage .layui-laypage-skip {
    color: #F8F8FB;
}

8 页工具栏 背景颜色

 
.layui-laypage {
    background-color: #00f;
}
1234

9 共1条颜色


.layui-laypage .layui-laypage-count {
    color: #F8F8FB;
}

10 条每页颜色

input, optgroup, option, select {
    color: #F8F8FB;
    /*background-color: #14243C;*/
    background-color: transparent; 
}

11 确定按钮 颜色

 
.layui-laypage-skip button {
    color: #F8F8FB;
    /*background-color: #14243C;*/
    background-color: transparent;
}

12 第几页的 input 输入框样式

.layui-laypage-skip input {
    color: #F8F8FB;
    background-color: #14243C;
    background-color: transparent;
    /*background-color: transparent;*/
}

13 左右箭头的颜色

.layui-icon {
    color: #F8F8FB;
}

14 页码的字体颜色

/*页码的字体颜色*/
.layui-laypage a {
    color: #F8F8FB;
}

15 当前选中页的按钮颜色


.layui-laypage .layui-laypage-curr .layui-laypage-em {
    color: #F8F8FB; /*白色*/
    background-color: #0094ff; /*蓝色*/
    background-color: transparent;
}

16 无数据时

/* 无数据 时字体颜色 */
.layui-table-body .layui-none {
    color: #F8F8FB;
}
当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »