控制周围角材料mdInput边境

我想风格我mdInput控制到周围有一个黑盒子：控制周围角材料mdInput边境

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

我试图把一个div与周围风格=“BORDER输入控制：1px的纯黑色;“但是它仅在输入控件本身创建边框。我尝试将边框添加到md-form-field中，但它仅将边框放置在左侧和右侧（但如果我能够在顶部和底部获得边框，则以高度进行判断，看起来好像我能够实现）实现这一目标？

来源

2017-09-19 AlexanderM

覆盖默认材质2样式的推荐方法是使用ViewEncapsulation。 deep，::ng-deep和>>>的贬值和未来（official documentation）可能下降。

不推荐使用阴影刺穿后代组合器，并且支持将从主要浏览器和工具中删除。因此，我们计划在Angular中支持（对于/deep/,>>>和:: ng-deep）中的所有3个。

要设置边框的投入，包括在以下的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。

来源

2017-09-20 07:07:22 Faisal

当焦点位于输入框中时，更改边框的类是什么？ – AlexanderM

试试这个：

::ng-deep .mat-input-wrapper{ 
background-color:black; 
}

或（取决于你的需要）

::ng-deep .mat-input-wrapper{ 
    border: 2px solid black; 
}

DEMO

封装：ViewEncapsulation.None有它的缺点，它会影响所有类，你希望与否。它仍然没有被弃用，我想它会被其他东西取代。

来源

2017-09-19 22:09:39 Vega

您还没有测试过您的解决方案的输出:) – Faisal

控制周围角材料mdInput边境

回答

相关问题