[英]How to change text box placeholder color in Angular 6 Material
角度6材質代碼。
<mat-form-field>
<input matInput placeholder="Input">
</mat-form-field>
當輸入元素變得聚焦時,我想更改默認顏色。
我已經累了。 如何在角材料中使用CSS更改md-input-container占位符顏色
似乎沒有任何工作。
如果我理解您的問題,此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;;
}
希望它有用。
對於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;
}
對於下划線,我使用了輪廓樣式的輸入,但是您可以更改使用的類。
/* 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;
}
雖然我認為這不是最好的方法,尤其是使用:: ng-deep,但對我來說,這是唯一適用於特定組件的方法。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.