Angular Material mdInput控件周围的边框

发布时间：2020-12-17 18:00:37 所属栏目：安全来源：网络整理

导读：我想将我的mdInput控件设置为在其周围有一个黑盒子： md-form-field input type="text" mdInput [(ngModel)]="row.price" placeholder="Price" /md-form-field 我尝试在输入控件周围放置一个div,其中style =“border：1px solid black;”但是它只在输入控件

我想将我的mdInput控件设置为在其周围有一个黑盒子：

<md-form-field>
      <input type="text" mdInput [(ngModel)]="row.price" placeholder="Price">
    </md-form-field>

我尝试在输入控件周围放置一个div,其中style =“border：1px solid black;”但是它只在输入控件本身周围创建边框.我试图将边框添加到md-form-field但是它只在左侧和右侧放置边框(但是如果我能够在顶部和底部获得边框,它看起来像我能够实现的任何方式来判断高度)实现那个？

解决方法

覆盖默认Material2样式的推荐方法是使用 ViewEncapsulation. deep,:: ng-deep和>>>是折旧的,将来可能会被贬值( official documentation).

The shadow-piercing descendant combinator is deprecated and support is
being removed from major browsers and tools. As such we plan to drop
support in Angular (for all 3 of /deep/,>>> and ::ng-deep).

要为输入设置边框,请在component.ts中包含以下内容：

import { ViewEncapsulation } from '@angular/core';

@Component({
    ....
    encapsulation: ViewEncapsulation.None
})

…然后在组件样式中添加以下内容：

/* To display a border for the input */
.mat-input-flex.mat-form-field-flex{
   border: 1px solid black;
}

/* To remove the default underline */
.mat-input-underline.mat-form-field-underline {
   background: transparent;
}

/* To remove the underline ripple */
.mat-input-ripple.mat-form-field-ripple{
   background-color: transparent; 
}

这是working demo.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!