如何隐藏/删除下划线输入 Angular Material? [英] How to hide/delete underline input Angular Material?

问题描述

我在 Angular Material 中有输入元素:

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?

好像我需要为 underlineRef 设置 null ?

Seem I need to set null for underlineRef?

推荐答案

更新:

导入MdInputDirective

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

在组件中执行以下操作:

In compoent do following:

@ViewChild('input') input: MdInputDirective;

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

在html中，添加#input引用:

In html, add the #input reference:

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

Plunker 演示

原文:

试试css:

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

演示

这篇关于如何隐藏/删除下划线输入 Angular Material?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！