如何隐藏/删除下划线输入角材料? [英] 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?

推荐答案

更新:

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

柱塞演示

原始:

尝试CSS:

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

演示

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