控件周围的Angular Material mdInput边框 [英] Angular Material mdInput border around the control
问题描述
我想为mdInput控件设置样式,使其周围有一个黑框:
I would like to style my mdInput control to have a black box around it:
<md-form-field>
<input type="text" mdInput [(ngModel)]="row.price" placeholder="Price">
</md-form-field>
我试图用style ="border:1px solid black;"在输入控件周围放置一个div.但是,它仅在输入控件本身周围创建边框.我试图将边框添加到md-form-field,但是它仅在左侧和右侧放置了边框(但如果通过高度判断,如果我能够在顶部和底部获得边框,看起来好像可以实现),则可以通过任何方式实现这一目标?
I tried to put a div around the input control with style="border: 1px solid black;" however it is creating border only around the input control itself. I tried to add border to md-form-field but it puts border only on the left and right (yet judging by height if I would be able to get border on top and bottom it looks like I would be able to achieve) any way to achieve that?
推荐答案
覆盖默认Material2样式的推荐方法是使用官方文档).
Recommended way to override default Material2 styles is to use ViewEncapsulation. deep
, ::ng-deep
and >>>
are depreciated and maybe dropped in future (official documentation).
不推荐使用穿刺后代组合器,并且支持 从主要的浏览器和工具中删除.因此,我们计划放弃 Angular支持(/deep/,>>> 和 :: ng-deep 的全部三个).
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
中添加以下内容:
To set a border for the input, include the following in your component.ts
:
import { ViewEncapsulation } from '@angular/core';
@Component({
....
encapsulation: ViewEncapsulation.None
})
...然后在您的组件样式中添加以下内容:
... then just add the following in your component styles:
/* 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;
}
这是一个 工作演示 .
这篇关于控件周围的Angular Material mdInput边框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!