Change color of arrow down inside select

Question

I'm currently using ngx paginator and I want to override CSS styles to use white color so I try:

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;
         }
      }
   }

Result:

The problem is that I can not change the arrow down to white, I tried using

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

But this does not work, how can I achieve this?

Answer 1

When you use matNativeControl attribute, it changes the way it make the arrow, in this case you must use:

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

applying the style at pseudo-element after instead of apply direct on the arrow class.

Answer 2

Just add color: white; to .mat-form-field-infix::after class like this:

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

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