CODEWITHSUNDEEP
cssangularangular-materialbackground-color
Bugpirasi
Bugpirasi

Reputation: 423

Angular 10 - Remove background color on mat-select

Just take a look to the image:

mat-option

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?

Upvotes: 3

Views: 9725

Answers (3)

jenson-button-event
jenson-button-event

Reputation: 18941

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

Upvotes: 4

Alejandro Campos Palacios
Alejandro Campos Palacios

Reputation: 473

Just type in your css style:

::ng-deep
  .mat-form-field-type-mat-select:not(.mat-form-field-disabled)
  .mat-form-field-flex {
  background-color: transparent !important;
}

here a demo: https://stackblitz.com/edit/angular-pj5rjj-hnmy6q?file=app%2Fsidenav-position-example.css

Upvotes: 1

acincognito
acincognito

Reputation: 1743

You can try:

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

That did the trick for me.

Upvotes: 3

Related Questions