Clever Geek Handbook

How to hide / remove the underlined input of Angular Material?

I have an input element in Angular Material:

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

When input focus matters, it displays an underline. How do I hide or remove it?

Looks like I need to install null

for underlineRef

?

+11


source to share


8 answers


Update:

Import MdInputDirective 

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

In compoent, do the following:

@ViewChild('input') input: MdInputDirective;

ngOnInit(){
  this.input.underlineRef.nativeElement.className = null;
}

In html add link #input

:



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

demonstration

+15


source


This worked for me:

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


Add it to scss or css component

+15


source


The other answers did not work for me, but this worked:

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


source 


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


the above code will remove the default black underline

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


this will remove the ripple effect on focus

+1


source 


This worked for me

.mat-form-field-appearance-legacy .mat-form-field-underline {
    height: 0 !important;
}
+1


source


If you're using google-landed mat-form-field

instead of md-input-container

here, here are your two options.

  1. Just comment out the field mat-form-field

    and use your own styles.
  2. See other appearance options available for in the documentation . mat-form-field

0


source


For me it worked without ::ng-deep

. Using Angular 6.1.10 like this:

<form>
  <mat-form-field class="no-line">
    <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;
}
0


source


I played around with the view property a bit and found that if you enter the value "none" (or any other unsupported value), you get a clear input. appearance

mat-form-field

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: Options for the appearance of a form field .

I admit this is a bit of a hack.

0


source






More articles:


All Articles