CODEWITHSUNDEEP
angular-material
PGH
PGH

Reputation: 2204

How to remove underline of mat-select component

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.

Upvotes: 30

Views: 45544

Answers (7)

Ya.
Ya.

Reputation: 2627

For legacy material components set appearance to none:

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

For mdc components:

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

Upvotes: 4

hiroki
hiroki

Reputation: 21

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

Upvotes: 0

Viplav Soni
Viplav Soni

Reputation: 1727

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

Upvotes: 0

Khushbu Raval
Khushbu Raval

Reputation: 1177

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.

Upvotes: 0

Gel
Gel

Reputation: 3016

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

Upvotes: 1

Ankit Agarwal
Ankit Agarwal

Reputation: 1348

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

Upvotes: 30

camden_kid
camden_kid

Reputation: 12813

You can do this:

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

StackBlitz

enter image description here

Upvotes: 69

Related Questions