html - 更改选择内部向下箭头的颜色

Question

我目前正在使用 ngx 分页器，我想覆盖 CSS 样式以使用白色，所以我尝试：

HTML

 <div class="paginator__footer-select col col-md-3 offset-md-1 ">
                      <mat-form-field appearance="outline">
                        <mat-label class="paginator__footer-perPage">Per page</mat-label>
                        <select matNativeControl [(ngModel)]="perPage" (ngModelChange)="setPerPage($event)" name="perPage">
                          <option value="10">10</option>
                          <option value="20">20</option>
                          <option value="30">30</option>
                          <option value="40">40</option>
                        </select>
                      </mat-form-field>
                    </div>

SCSS

.paginator__footer {
      padding-top: 42px;
    
      &-select{
        font-size: 12px;
        display: flex;
        align-items: center;
      }


input.mat-input-element {
  color: #ffffff;
}

      &-controls {
        font-size: 18px;
        display: flex;
        align-items: center;
      }

    }

    ::ng-deep {
      .mat-form-field-appearance-outline .mat-form-field-outline {
         color: #ffffff;
      }

      .mat-select-arrow {
        color: white;
      }
      mat-form-field {
         .mat-hint, input, ::placeholder, .mat-form-field-label {
            color: #ffffff;
         }
      }
   }

结果：

问题是我无法将箭头更改为白色，我尝试使用

.mat-select-arrow {
        color: white;
      }

但这不起作用，我该如何实现呢？

Answer 1

当您使用matNativeControl属性时，它会改变制作箭头的方式，在这种情况下您必须使用：

.mat-select-arrow:after {
  color: white;
}

在伪元素after上应用样式，而不是直接在箭头类上应用。

Answer 2

只需像这样添加color: white;到.mat-form-field-infix::after类中：

::ng-deep {
  .mat-form-field-appearance-outline .mat-form-field-outline {
     color: #ffffff;

     .mat-form-field-infix::after {
       color: #ffffff;
     }
}