How to hide/delete underline input Angular Material?

I have input element in Angular Material:

<md-input-container> <input type="text" mdInput placeholder=""> </md-input-container> 

When input has focus it displays underline. How to hide or remove that?

Seem I need to set null for underlineRef?

10 Answers

I was playing a bit with the appearance property of mat-form-field and found that if you put a "none" value (or any other unsupported value), you will get clear input.

The code:

 <mat-form-field appearance="none"> <mat-label>"None" form field</mat-label> <input matInput placeholder="Placeholder"> </mat-form-field> 

StackBlitz demo (edited from the official angular demo).

The original example can be found here: Form field appearance variants.

I admit, this is a little bit of a hack.

This worked for me:

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

Add it to the component's scss or css

Update:

Import MdInputDirective

import {MdInputDirective} from '@angular/material'; 

In compoent do following:

@ViewChild('input') input: MdInputDirective; ngOnInit(){ this.input.underlineRef.nativeElement.className = null; } 

In html, add the #input reference:

<md-input-container #input> <input mdInput placeholder="Last 4 SSN"> </md-input-container> 

Plunker demo

Original:

Try css:

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

demo

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

the above code will remove the default black underline

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

this will remove the on focus ripple effect

This worked for me .mat-form-field-appearance-legacy .mat-form-field-underline { height: 0 !important; } 

you can set your appearance to none in mat-form-field tag like this :

<mat-form-field appearance="none"> <mat-label>search</mat-label> <input matInput placeholder="add product/> </mat-form-field> 

For me it worked without ::ng-deep. Using Angular 6.1.10 as follows:

<form> <mat-form-field> <input type="text" matInput field="label" [matAutocomplete]="auto" [formControl]="formControl"/> <mat-autocomplete #auto="matAutocomplete"> <mat-option *ngFor="let food of foods" [value]="food.value"> {{ food.label}} </mat-option> </mat-autocomplete> </mat-form-field> </form> 

.no-line .mat-form-field-underline { display: none; } 

The other answers didn't work for me, but this did:

md-input-container input { border: none; } 

If you are using mat-form-field instead of md-input-container and google-landed here, here are your two options.

1. Just comment out the mat-form-field and use your own styles.
2. See other appearance options available for mat-form-field from the documentation.

just set appearance="none" inside the tag

<mat-form-field appearance="none"> </mat-form-field>