如何隐藏/删除下划线输入Angular Material？

Question

我在Angular Material中有输入元素:

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

当输入具有焦点时,它显示下划线.如何隐藏或删除？

我似乎需要设置null的underlineRef？

Answer 1

这对我有用:

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

将其添加到组件的scss或css中

效果很好，仅供参考，看起来 `::ng-deep` 现在已[已弃用](https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep)，但是这个 css 有效对我来说不使用它。 (2认同)

Answer 2

更新:

进口 MdInputDirective

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

在compoent做以下:

@ViewChild('input') input: MdInputDirective;

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

在html中,添加#input引用:

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

原版的:

试试css:

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

@ Nehal，Plunker更新为beta.7，最新版本为beta.12，其中没有MdInputDirective (2认同)
你可以从angular.io的[页面](https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep)了解ng-deep (2认同)

Answer 3

我在玩弄的appearance属性时mat-form-field发现，如果您输入“无”值（或任何其他不受支持的值），则会得到清晰的输入。

代码：

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

StackBlitz演示（从官方角度演示编辑）。

原始示例可在此处找到：表单字段外观变量。

我承认，这有点骇人听闻。

随着 ng-deep 被弃用，这是最好的答案。 (5认同)
这不再适用于角度 15 (5认同)
在 tsconfig.json 中使用 angularCompilerOptions.strictTemplates = true 会导致错误 TS2322：类型“none”不可分配给类型“MatFormFieldAppearance”。 (3认同)
不适用于 anuglar 11+ (3认同)

Answer 4

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

上面的代码将删除默认的黑色下划线

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

这将消除聚焦涟漪效应

Answer 5

This worked for me

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