How to change the background colour of mat-select and change edge of select box to rounded style?-CodePudding

Can anyone help me with changing the colour of mat-select box and how to style the box to have rounded corners. I tried by giving it the background-colour property but it is not affecting my element.

html

 <mat-form-field appearance="outline"> 
       <mat-select >
          <mat-option *ngFor="let x of filteredData [value]="x">{{x.name}} - {{x.place}} 
          </mat-option>
       </mat-select>
    </mat-form-field>

css

.topunit{
    background-color: white;
    margin-top: 5%;
    padding: 0 0.75em 0 0.75em;
    width: 75%;
    align-items: baseline;
    border-radius: 20px;
}

CodePudding user response：

Severals controls of material angular use cdk to create a div cdk-overlay-container outside our app. So if we want to change the .css we need use style.css (not the .css of the component)

Futhermore, usually this controls has a property: "PanelClass" that allow us only change this control -not all- (*)

So you can write in styles.css, e.g.

.topunit.mat-select-panel
{
  background-color: red;

}

And in your .html

<mat-select panelClass="topunit">
  ...
</mat-select>

(*) see that if we only write in styles.css

.mat-select-panel
{
  background-color: red;

}

All ours pannels with class mat-select-panel becomes red.

CodePudding user response：

You have to use ::ng-deep to force a style down to child components. This selector had an alias, in this case ::ng-deep

EXAMPLE:

 ::ng-deep .mat-select-panel{
     background: red !important;
 }

this way you will override mat-select-panel background color.

the best way to find the classes you need to change is using the browser element inspector