How to remove underline of mat-select component

Question

I am using basic mat-select component in my project.

 <mat-form-field>
     <mat-select placeholder="Favorite food">
       <mat-option *ngFor="let food of foods" [value]="food.value">
          {{food.viewValue}}
        </mat-option>
    </mat-select>
 </mat-form-field>

how can i remove the underline,I have tried this answer too still no result.

Answer 1

You can do this:

::ng-deep .mat-form-field-underline {   display: none; } 

StackBlitz

Answer 2

You can also use the appearance property on the <form-field> . Setting appearance="none" will remove the underline without any css hack. And you can also get rid of ::ng-deep which is not recommended.

So your code will be like this.

<mat-form-field appearance="none">
 <mat-select placeholder="Favorite food">
   <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

For more information on appearance, you can check here. https://material.angular.io/components/form-field/overview#form-field-appearance-variants