I've been attempting to modify the color of a mat-select placeholder. It functions properly when using 'background-color' but not when using 'color'. Below is my CSS code:
/deep/ .mat-select-placeholder {
color: red;
}
.mat-select-placeholder {
color: red;
}
And here is the HTML 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 have also tried using /deep/, but to no avail. The text always remains in black, even though I have set the color and background-color to red. Can someone explain why it works with background-color but not with color? Additionally, I am facing another issue where the placeholder appears smaller in size and always shows up in black when a mat-option is selected from the list, despite setting both the color and background-color to red. Any help would be greatly appreciated.