工作中用到了elementui组件库中的分页组件el-pagination,但是组件是默认有白色的背景色的,在有背景的页面上就显得很突兀,虽然以前工作中遇到一直修改,但还是为了方便直接百度,大概试了七八个css的代码片段,没有一个能用的,都没有效果,于是决定自己写,打开检查元素…
如下,直接用
// page-sizes选择器
::v-deep .el-select-dropdown__item li{
background-color:transparent !important;
}
// prev和next箭头的样式
::v-deep .el-pagination .btn-next,
::v-deep .el-pagination .btn-prev{
background:transparent !important;
background-color:transparent !important;
}
// prev和next箭头disabled的样式
::v-deep .el-pagination button:disabled {
background-color:transparent !important;
}
// 页码样式
::v-deep .el-pager li{
background-color:transparent !important;
}
// active的页码样式
::v-deep .el-pager li.active{
color: #267aff !important;
}
效果: