更改選擇內向下箭頭的顏色

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>

社會保障局

.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 class 像這樣：

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

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