Angular 10 - Remove background color on mat-select

Question

Just take a look to the image:

Basically, I want to change/remove the background color (the gray one) on this mat-option element. I also tried with the browser inspector in order to find the class that has the background-color line, but I couldn't find nothing.

Any idea?

Answer 1

You'll need to either:

1. deprecated ng-deep
2. turn off component view encapsulation
3. use a global style

::ng-deep .mat-form-field-appearance-fill .mat-form-field-flex {
    background-color: #fff; 
}

Answer 2

You can try:

.mat-form-field-appearance-fill .mat-form-field-flex {
   background-color: red;
}

That did the trick for me.