删除下划线输入角材质

删除下划线输入角材质

本文介绍了如何隐藏/删除下划线输入角材质?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

演示

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

08-22 23:56