Is there a way to modify the color of the selected option text in a mat-select component within an Angular 15 project?
.html
<mat-form-field>
<mat-label>From</mat-label>
<mat-select panelClass="mat-select-red">
<mat-option>January</mat-option>
<mat-option>February</mat-option>
<mat-option>March</mat-option>
</mat-select>
</mat-form-field>
.ts
The ViewEncapsulation is set to none.
@Component({
selector: 'app-myapp',
templateUrl: './myapp.component.html',
styleUrls: ['./myapp.component.scss'],
encapsulation: ViewEncapsulation.None
})
.scss
I have tried various CSS selectors without success so far.
.mat-select-red.mat-mdc-select-value-text{
color: red !important;
}
// Other CSS attempts...
mat-mdc-form-field{
color: red;
}
Note: A specific CSS rule successfully alters the background color, but I specifically need to change the text color of the selected value.
.mat-select-red.mat-mdc-select-panel {
background: rgba(255, 0, 0, 0.5);
}
UPDATE
Here is the rendered HTML content as requested.
...rendered HTML code here...