[英]How to change text box placeholder color in Angular 6 Material
Angular 6 material code. 角度6材质代码。
<mat-form-field>
<input matInput placeholder="Input">
</mat-form-field>
I wanted to change default color when input element get focused. 当输入元素变得聚焦时,我想更改默认颜色。
I have already tired this. 我已经累了。 How do i change md-input-container placeholder color using css in angular material
如何在角材料中使用CSS更改md-input-container占位符颜色
nothing seems work. 似乎没有任何工作。
If i understand your question this css should work. 如果我理解您的问题,此CSS应该可以工作。
.mat-focused .mat-form-field-label {
/*change color of label*/
color: red !important;
}
.mat-form-field-underline {
/*change color of underline*/
background-color: blue !important;
}
.mat-form-field-ripple {
/*change color of underline when focused*/
background-color: yellow !important;;
}
Hope it was useful. 希望它有用。
For Angular 7 and Material 7, this worked for me: 对于Angular 7和Material 7,这对我有用:
/* Placeholder overrides */
:host ::ng-deep input::-webkit-input-placeholder {
color: rgba(255,255,255, 0.7) !important;
}
:host ::ng-deep input:-moz-placeholder { /* Firefox 18- */
color: rgba(255,255,255, 0.7) !important;
}
:host ::ng-deep input::-moz-placeholder { /* Firefox 19+ */
color: rgba(255,255,255, 0.7) !important;
}
:host ::ng-deep input:-ms-input-placeholder {
color: rgba(255,255,255, 0.7) !important;
}
For the underline, I used an outline styled input but you can just change the class used. 对于下划线,我使用了轮廓样式的输入,但是您可以更改使用的类。
/* Appearance around each input/button to remove faded outline
but put the dark hover back in */
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
color: transparent !important;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-thick {
color: rgba(255, 255, 255, 0.87) !important;
}
While I don't think this is the best way of doing it, especially using ::ng-deep, it's the only thing that works right now for a specific component, for me. 虽然我认为这不是最好的方法,尤其是使用:: ng-deep,但对我来说,这是唯一适用于特定组件的方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.