How to hide/delete underline input Angular Material?

Question

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?

score 95 · Answer 1 · answered Mar 28 '19 at 09:49

95

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.

answered Mar 28 '19 at 09:49

jurl

2,504
1
17
20

6

With ng-deep being deprecated, this is the best answer. – Patrick Dec 19 '19 at 18:42
As per angular, use /deep/, >>> and ::ng-deep only with emulated view encapsulation. I.e angular is not going to remove it. – Amitesh Apr 16 '20 at 01:13
13

With angularCompilerOptions.strictTemplates = true in tsconfig.json this leads to error TS2322: Type '"none"' is not assignable to type 'MatFormFieldAppearance'. – alx May 20 '20 at 16:45
this works (on angular 9) but the height of the input gets increased – Biiz Jul 08 '20 at 11:27
3

This no longer works with angular 15 – jdawg73 Jan 11 '23 at 22:40

Paul Lockwood · Answer 2 · 2018-09-07T14:38:59.177

52

This worked for me:

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

Add it to the component's scss or css

edited Sep 07 '18 at 14:38

answered Sep 05 '18 at 13:25

Paul Lockwood

4,283
1
24
19

2

works great, fyi it looks like `::ng-deep` is now [deprecated](https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep), however this css worked for me without using it. – FireDragon Nov 12 '18 at 01:29
Traversing the link and its children they seem to say no replacement is proposed(!). Very odd. At least it will almost certainly it will take years to be removed. Thank-you for raising our attention about that. – Paul Lockwood Nov 13 '18 at 12:29
1

Be careful, it is not the right answer. `::ng-deep` would apply to all Material Components that have this class. What you should do is add custom class to the component inside HTML and then reference it like this inside SCSS file. The correct answer should be https://stackoverflow.com/questions/71959674/how-to-avoid-extra-mat-form-field-underline-in-angular-material – Bigeyes Jan 10 '23 at 18:35

Nehal · Accepted Answer · 2017-08-07T23:46:48.953

26

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

edited Aug 07 '17 at 23:46

answered Aug 07 '17 at 23:19

Nehal

13,130
4
43
59

But how to do that using property `underlineRef`? – Daniel Aug 07 '17 at 23:21
hey , getting an error `Property 'underlineRef' does not exist on type 'MdInputDirective'` – angular.aditya Aug 18 '17 at 22:21
Looking at you comment, I can't tell what code you have written/tried that's throwing/causing the error. There's a working plunker, you can compare your code with that. Or you can open a new SO question for your issue. – Nehal Aug 18 '17 at 22:43
2

@Nehal, the Plunker is update to beta.7 the latest version is beta.12 which doesn't have MdInputDirective – eyalewin Nov 06 '17 at 13:04
What is `::ng-deep` ? Tried all CSS rules I could imagine, but nothing worked. Why is this working? – Florian Leitgeb Jun 08 '18 at 13:27
2

You can learn about ng-deep from angular.io's [page](https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep) – Nehal Jun 20 '18 at 02:19
I have to say... it's unbelivable that you have to import a directive for a bottom line that should be delt with with css... not in a good way – Tomas Katz Sep 24 '19 at 12:47

Naresh Chennuri · Answer 4 · 2019-01-24T05:56:29.167

8

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

edited Jan 24 '19 at 05:56

answered Jan 23 '19 at 12:53

Naresh Chennuri

1,133
11
10

score 6 · Answer 5 · answered Mar 07 '19 at 07:01

6

This worked for me

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

answered Mar 07 '19 at 07:01

md_salm

459
5
9

This is the only CSS solution that worked for me (@angular/material 8.0) – 2Toad Aug 23 '19 at 20:21
Glad I could help! – md_salm Aug 24 '19 at 21:24

score 4 · Answer 6 · answered Apr 26 '20 at 13:00

4

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

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

answered Apr 26 '20 at 13:00

Alireza Ebrahimkhani

530
4
13

1

This will not work when using strict mode. You will need to pass a value of MatFormFieldAppearance: material.angular.io/components/form-field/api – Martijn van den Bergh Jan 07 '21 at 08:41

score 2 · Answer 7 · answered Jan 15 '19 at 12:33

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

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

score 2 · Answer 8 · answered Jan 23 '19 at 14:47

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

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

score 1 · Answer 9 · answered Oct 05 '18 at 11:32

1

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

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

answered Oct 05 '18 at 11:32

guy49987

94
1
10

score 1 · Answer 10 · edited Mar 27 '20 at 16:02

1

just set appearance="none" inside the tag

<mat-form-field style="width:40px" appearance="none"> </mat-form-field>

edited Mar 27 '20 at 16:02

Alon Eitan

11,997
8
49
58

answered Mar 27 '20 at 16:00

ABHISHEK N

29
3

4

This will not work when using strict mode. You will need to pass a value of MatFormFieldAppearance: https://material.angular.io/components/form-field/api – Martijn van den Bergh Jan 07 '21 at 08:41
How exactly pass a value of MatFormFieldAppearance ? – Akrem Hammami May 12 '22 at 10:17

score 1 · Answer 11 · answered Aug 10 '23 at 18:23

1

none of these worked for me except this

::ng-deep .mdc-line-ripple {
  display: none
}

as of @angular/material 15.2.3

answered Aug 10 '23 at 18:23

Nathan Clark Baumgartner

801
10
10

score 0 · Answer 12 · answered Jan 12 '23 at 10:49

Lots of good answers here, but here's one I found useful, did not need ::ng-deep or anything like that. Simply add this to your global styles.scss file. Use on any form fields you don't want an underline.

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

score 0 · Answer 13 · answered Jan 20 '23 at 11:09

0

I have tried every solution but nothing worked for me so I did this little trick using only the CSS. Also if you want to hide it for a specific element only than add a custom class with it.

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

answered Jan 20 '23 at 11:09

Aftab Hassan

1
1

How to hide/delete underline input Angular Material?

13 Answers13

Linked