How to remove underline of mat-select component

You can do this:

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

StackBlitz

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

::ng-deep is going to be depracated.

Use css hierarchy. If you have a global css or scss file... then in the component, wrap this in a div and give it a class.

For example,

<div class="content-wrapper">

...all your html code here

</div>

Then, in your global css/scss file, you can target the .mat-form-field-underline class like so:

.content-wrapper .mat-form-field-underline {
  display: none;
}

Here, notice that we don't use comma after class names. This is using hierarchy. It saying that we only want to target the native .mat-form-field-underline class that is wrapped inside the .content-wrapper

Hope this helps. Glad my senior developer had shared me this as we used ViewEncapsualtion, which bled css all over the place. This is the right solution to our use case, hope it helps yours.

This also works for other native mat classes for customization of your code/html.

If you want to hide underline in particular input only then you can do something like below.

   <div class="select-block">
        <mat-form-field>
           <mat-select placeholder="Select Option">
             <mat-option>One</mat-option>
             <mat-option>Two</mat-option>
             <mat-option>Three</mat-option>
          </mat-select>
       </mat-form-field>
    </div>

• Add the below-mentioned line of code in the parent class of mat-form-field.

.select-block{
    /deep/ mat-form-field {
      &.mat-form-field-appearance-legacy {
        .mat-form-field-underline {
          display: none;
        }
      }
    }
 }

Try this way to hide the underline. Thanks.

Two options to solve the problem:

1. You can directly setup appearance="none" in mat-form-field tag
   ex. <mat-form-field appearance="none">.
2. You can hide using css
   ex. ::ng-deep .mat-form-field-underline { display: none; }

I had appearance="fill" on the mat-form-field. These settings worked to remove the underline for me:

scss:

.mat-form-field-appearance-fill {
  .mat-form-field-underline {
    display: none;
  }
}

Add set encapsulation to ViewEncapsulation.None in the component:

encapsulation: ViewEncapsulation.None