如何 hide/delete 在输入 Angular Material 下划线？

Question

我在 Angular Material 中有输入元素：

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

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

似乎我需要为 underlineRef 设置 null？

Answer 1

更新：

导入MdInputDirective

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

在组件中执行以下操作：

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

Plunker demo

原文：

尝试 css:

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

demo

Answer 2

这对我有用：

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

添加到组件的css或css

Answer 3

其他答案对我不起作用，但这个答案：

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

Answer 4

如果您使用 mat-form-field 而不是 md-input-container 和 google-登陆这里，这是您的两个选择。

只需注释掉 mat-form-field 并使用您自己的样式。
查看 mat-form-field from the documentation 可用的其他外观选项。

Answer 5

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

以上代码会去掉默认的黑色下划线

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

这将消除焦点上的涟漪效应

Answer 6

对我来说，它在没有 ::ng-deep 的情况下也能正常工作。使用 Angular 6.1.10 如下：

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

Answer 7

This worked for me

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

Answer 8

我在 mat-form-field 的 appearance 属性上玩了一下，发现如果你输入 "none" 值（或任何其他不受支持的值），你将获得清晰的输入。

代码：

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

StackBlitz demo（根据官方 angular 演示编辑）。

原始示例可在此处找到：Form field appearance variants。

我承认，这有点乱。

Answer 9

只需在标签

内设置 appearance="none"

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

Answer 10

您可以在 mat-form-field 标签中将您的外观设置为 none，如下所示：

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

如何 hide/delete 在输入 Angular Material 下划线？

How to hide/delete underline input Angular Material?

angular-material2

angular