Angular mat-select text color doesn't change

Question

I am using mat-select in my Angular application. I would like to change the text color, but the color doesn't change.

<mat-select style="color: red" [(ngModel)]="someValue">
  <mat-option>class="empty-select"</mat-option>
  <mat-option class="not-empty-select" *ngFor="let unit of units [value]="unit">{{unit}}</mat-option>
</mat-select>

I can change the background color without problems, but the text color doesn't change.

Answer 1

You need to apply style on mat-option rather than mat-select as:

<mat-select [(ngModel)]="someValue">
  <mat-option class="empty-select"></mat-option>
  <mat-option style="color: red" class="not-empty-select" *ngFor="let unit of units [value]="unit">{{unit}}</mat-option>
</mat-select>

Also you can set color in class not-empty-select.

Update 1:

If you want to change color of selected option add following CSS:

.not-empty-select.mat-selected {
  color: green !important;
}

Update 2:

If you want to change color in select box modify CSS as:

.not-empty-select.mat-selected {
  color: green !important;
}

:host /deep/ .mat-select-value-text {
  color: green !important;
}

Answer 2

You can overwrite the css for following elements as -

Select box panel

/deep/ .mat-select-panel {
    background-color: red;
}

Select box options element

/deep/ .mat-form-field-infix{
     background-color: red;
}

Select box

/deep/ .mat-select{
   background-color: red;
}

do not forget to add /deep/ as mentioned.

Select Box text color

Use this one if you want to change the text color of select.

/deep/ .mat-form-field-type-mat-select .mat-form-field-label, .mat-select-value {
  color: red;
}

Demo copy is here - https://stackblitz.com/edit/angular-material-pagination-123456-5teixy

Answer 3

If you check closely mat-select-value is the class which holds the css for placeholer font in mat-select tag;

so Using

::ng-deep .mat-select-value{    
      color: white!important;  }

will apply the color you give. !important is to override the default value.

Answer 4

Add this to your styles.css file

.mat-select-red .mat-select-value{
   color: red !important;
}

In your component.html file

<mat-select class="mat-select-red" [(ngModel)]="someValue">
  <mat-option>class="empty-select"</mat-option>
  <mat-option class="not-empty-select" *ngFor="let unit of units [value]="unit">{{unit}}</mat-option>
</mat-select>