【转载】element-ui 修改分页样式

转自:https://blog.csdn.net/hong521520/article/details/118528083

 

修改未选中背景和字体

/deep/.el-pagination.is-background .el-pager li:not(.disabled) {
background-color: #0e1423; // 进行修改未选中背景和字体
color: #8fb1d2;
border: 1px solid #4581ae;
border-radius: 5px;
width: 40px;
height: 40px;
line-height: 40px;
}

修改选中后的样式

/deep/.el-pagination.is-background .el-pager li:not(.disabled).active{
background-color: #2b597d;
color: #cafbfd; //修改选中后的样式
}

上一页和下一页的样式

//上一页和下一页的样式
/deep/.el-pagination.is-background .btn-next{
//margin: 0 5px;
background-color: #0e1423;
color: #8eb1cc;
min-width: 68px;
height: 40px;
border-radius: 5px;
border:1px solid #4581ae ;
}
/deep/.el-pagination.is-background .btn-prev{
//margin: 0 5px;
background-color: #0e1423;
color: #8eb1cc;
min-width: 68px;
height: 40px;
border-radius: 5px;
border:1px solid #4581ae ;
}

点赞

发表回复

电子邮件地址不会被公开。必填项已用 * 标注