can't change angular's material select placeholder color

user_10296610 0
Viewed 1188

im having problem with setting placeholder's color to white on the dark background, when setting to white, it has weird stroke like this: enter image description here

https://stackblitz.com/edit/angular-twbzew-ealbnk

<mat-form-field>
    <mat-select [ngClass]="className" placeholder="{{someText}}">
        <mat-option *ngFor="let item of items" [value]="item.value">
            {{ item.viewValue }}
        </mat-option>
    </mat-select>
</mat-form-field>


.basic-container {
    background: black;

  padding: 5px;
}


.class1  .mat-select-placeholder {
  color:white !important;
}
angular-material angular
2 Answers

There appears to be a second placeholder element that sits in front.

You can modify the CSS to also make that 2nd element white, like so:

.class1  .mat-select-placeholder, 
.class1 + .mat-input-placeholder-wrapper .mat-input-placeholder {
    color:white !important;
}

Here is a fork of the Stackblitz to demonstrate

user_27809430 
Try this

:host /deep/ .mat-form-field-label-wrapper .mat-form-field-label {
    color:white !important;
}
user_83494790
Related