29

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.

1

6 Answers 6

68

You can do this:

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

StackBlitz

enter image description here

3
  • Can i apply it only for one mat-select ?, I have many mat-select in the form.
    – PGH
    Aug 28, 2018 at 14:23
  • it is effecting to all mat-form-fields
    – Venkat
    Feb 2, 2020 at 7:54
  • this also worked for my form where I have <mat-form-field> and inside I have an input div <input matInput type="text">
    – Gel
    Apr 2, 2020 at 17:24
32

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

2
  • 5
    There is nothing about appearance "none" in the material docs for some reason. I confirmed it does work though.
    – MDave
    Apr 22, 2020 at 23:41
  • error TS2322: Type '"none"' is not assignable to type 'MatFormFieldAppearance'. Dec 28, 2022 at 18:10
1

::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.

0

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.

0

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.