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

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>

Plunker demo

<强>原始

尝试使用css：

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

demo

Answer 3

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

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

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

这将消除聚焦波纹效应

Answer 4

您可以在mat-form-field标签中将外观设置为“无”：

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

Answer 5

其他答案对我不起作用，但确实如此：

md-input-container input {
        border: 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的{{3}}属性时发现，如果您输入“无”值（或任何其他不受支持的值），则会得到清晰的输入。

代码：

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

appearance（根据官方角度演示进行编辑）。

原始示例可在此处找到：StackBlitz demo。

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

Answer 9

只需在标签内设置appearance="none"

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

Answer 10

如果您使用的是mat-form-field而不是md-input-container并在此处谷歌登陆，这是您的两个选择。

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

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

10 个答案: