How to change mat-select placeholder color?

Question

I am trying to change the color of a mat-select placeholder. It works fine if this is 'background-color' but not if this is 'color'. Here is my css code:

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

 .mat-select-placeholder {
   color: red;
 }

Here is the hmtl code:

<mat-form-field class="formfield-size-medium">
  <mat-select [formControlName]="formControl.nationality" name="Nationality"
          placeholder="Nationalities" 
      class="class-mat-select" multiple>
          <mat-option *ngFor="let nationality of 
             nationalityList.nationalities" [value]="nationality.value">
              {{getNationalityValue(nationality.value)}}
          </mat-option>
  </mat-select>
</mat-form-field>

I tried also with /deep/ but it still does not work. The text is always in black. So why it works with background-color and not with color? My other issue is that when there is a mat-option selected in the list, the placeholder (looking smaller) is always in black even when color is set to red and background-color is also set to red. Thanks for your help.

Muhammed Albarmavi · Answer 1 · 2018-12-04T08:53:53.813

3

I have manage to change the color of placeholder like this

style.css

mat-form-field span.mat-form-field-label-wrapper label {
  color:orange !important;
}

mat-form-field.mat-focused span.mat-form-field-label-wrapper label {
  color:green !important;
}

stackblitz demo

edited Dec 04 '18 at 08:53

answered Nov 23 '18 at 10:46

Muhammed Albarmavi

23,240
8
66
91

Thanks. It works well with matInput. With mat-select it works if focused, but not if not focused. – corleone88 Nov 23 '18 at 13:57
can you check the demo @corleone88 – Muhammed Albarmavi Nov 23 '18 at 14:22
Your example works very well, but I think that it does not work for me maybe because I work with Angular 5. Unfortunately, because of complicated project management, I cannot upgrade to Angular 6 or 7. So maybe there is a bug with Angular-Material 5. – corleone88 Nov 23 '18 at 15:24
check this https://stackblitz.com/edit/template-angular-material-with-angular-v5-kc8ofj – Muhammed Albarmavi Nov 23 '18 at 15:31
Hi, thanks again @malbarmawi for your test app in Angular 5. I downloaded the project on my PC, installed the dependencies but I cannot get the same thing as with stackblitz.com. No colour and the labels are under the input and the list element. It is like it does not care about the css. – corleone88 Dec 04 '18 at 08:42
After I added an ::ng-deep prefix this worked great! Thank you! – John Langford Aug 27 '20 at 14:39

score 1 · Answer 2 · answered Oct 06 '20 at 11:23

1

This works fine for me:

::ng-deep .mat-select-placeholder {
    color: orange !important;
}

answered Oct 06 '20 at 11:23

Danie

429
6
16

score 0 · Answer 3 · answered Aug 27 '20 at 14:38

Extremely similar to @malbarmavi's answer, I just needed to add ::ng-deep to get this to work:

::ng-deep mat-form-field span.mat-form-field-label-wrapper label {
  color:orange !important;
}

::ng-deep mat-form-field.mat-focused span.mat-form-field-label-wrapper label {
  color:green !important;
}

How to change mat-select placeholder color?

3 Answers3