造型角材料分页器

Sai*_*Ali 1 html css angular-material angular angular-material-paginator

我有一个看起来像的角材料分页器

在此处输入图片说明

我想样式,它应该看起来像

在此处输入图片说明

我现在很难设计它的样式。我只是能够移动分页器中的元素(开始和结束位置),除此之外,我无法进行任何修改。

请让我知道如何做所需的样式?

这是stackblitz链接https://stackblitz.com/edit/angular-tjhkpo

לבנ*_*לכה 5

使用以下CSS(有关更多样式,请打开F12并覆盖材质声明):

查看工作代码

::ng-deep .mat-paginator-page-size-select {
    width: 27px!important;
}
::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline {
    background-color: transparent;
}

::ng-deep .mat-select-value {
  color: #005999;
    font-weight: bold;
    font-size: 15px;
}
::ng-deep .mat-select-arrow {
    color: #005999;
}
::ng-deep .mat-option{
  padding: 0!important;

}
::ng-deep .mat-option-text {

    text-align: right;
}
Run Code Online (Sandbox Code Playgroud)