CODEWITHSUNDEEP
cssangularangular-material-5
corleone88
corleone88

Reputation: 181

How to change mat-select placeholder color?

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.

Upvotes: 3

Views: 12911

Answers (3)

Danie
Danie

Reputation: 459

This works fine for me:

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

Upvotes: 1

John Langford
John Langford

Reputation: 1435

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

Upvotes: 0

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24406

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

Upvotes: 3

Related Questions