如何隐藏/删除下划线输入的角度材料?

Question

我在角度材质中有输入元素：

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

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

看来我需要为underlineRef设置null？

Answer 1

我玩了一下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演示(编辑自官方角度演示(。

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

我承认，这有点黑客。

Answer 2

这对我有用：

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

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

Answer 3

更新：

导入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>

普伦克演示

源语言：

尝试 css：

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

演示

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

Answer 6

您可以在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>

Answer 7

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

1. 只需注释掉mat-form-field并使用自己的样式即可。
2. 请参阅文档中可用于mat-form-field的其他外观选项。

Answer 8

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

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

Answer 9

对我来说，它无需::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 10

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

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

Answer 11

这里有很多很好的答案，但这里有一个我发现有用的答案，不需要 ：：ng-deep 或类似的东西。只需将其添加到您的全局样式.scss文件中即可。用于您不需要下划线的任何表单字段。

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

Answer 12

除了这个，这些都对我不起作用

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

截至@angular/材料 15.2.3

Answer 13

我已经尝试了所有解决方案，但没有任何效果，所以我只使用 CSS 做了这个小技巧。此外，如果您只想为特定元素隐藏它，而不是使用它添加自定义类。

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