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.

[The answer by David Rinck](https://stackoverflow.com/a/52520660/2100126) on [another question](https://stackoverflow.com/questions/48540533/styling-mat-form-field-input-in-angular-material) (not marked as the right answer) is better approach I think. *"...use an ID, which allows you a higher specificity...and put the style on global styles file".* You can refers to [the answer](https://stackoverflow.com/a/52520660/2100126) of [David Rinck](https://stackoverflow.com/users/308962/david-rinck). — nilsandrey, May 16 '19 at 18:08

score 68 · Accepted Answer · answered Aug 28 '18 at 12:49

68

You can do this:

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

StackBlitz

answered Aug 28 '18 at 12:49

camden_kid

12,591
11
52
88

Can i apply it only for one `mat-select `?, I have many `mat-select ` in the form. – PGH Aug 28 '18 at 14:23
it is effecting to all mat-form-fields – Venkat Feb 02 '20 at 07:54
this also worked for my form where I have `` and inside I have an input div `` – Gel Apr 02 '20 at 17:24

score 31 · Answer 2 · answered Oct 09 '19 at 06:54

31

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

answered Oct 09 '19 at 06:54

Ankit Agarwal

1,350
10
15

5

There is nothing about appearance "none" in the material docs for some reason. I confirmed it does work though. – MDave Apr 22 '20 at 23:41
2

`error TS2322: Type '"none"' is not assignable to type 'MatFormFieldAppearance'.` – Perplexabot Dec 28 '22 at 18:10
appearance='none worked for the legacy components. IT does not work for mdc. Anybody know how to get rid of it for mdc? – Ya. Jul 25 '23 at 17:40

score 1 · Answer 3 · answered Jun 18 '20 at 13:06

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

score 1 · Answer 4 · answered Jul 25 '23 at 17:47

1

For legacy material components set appearance to none:

<mat-form-field appearance='none'>

For mdc components:

.mdc-line-ripple {
  display: none;
}

answered Jul 25 '23 at 17:47

Ya.

1,671
4
27
53

score 0 · Answer 5 · answered Dec 08 '20 at 05:10

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.

score 0 · Answer 6 · answered Apr 19 '21 at 09:52

0

Two options to solve the problem:

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

answered Apr 19 '21 at 09:52

Viplav Soni

1,489
13
18

score 0 · Answer 7 · answered Jul 01 '21 at 17:35

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

How to remove underline of mat-select component

7 Answers7