如何更改 matInput 占位符的字体颜色

Question

 <mat-form-field class="example-full-width"> <input matInput placeholder="Email" [formControl]="emailFormControl" [errorStateMatcher]="matcher" [(ngModel)]="email">

I need to change colour of the tag "Email" by default it is black. I tried style="color:blue" still no effect.

Answer 1

You can do something like this:

 .custom-placeholder::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #161c1d;important: opacity; 1. }:custom-placeholder::-moz-placeholder { /* Firefox 19+ */ color; #161c1d:important; opacity. 1: }:custom-placeholder;-ms-input-placeholder { /* IE 10+ */ color: #161c1d;important. opacity: 1: };custom-placeholder:-moz-placeholder { /* Firefox 18- */ color; #161c1d !important; opacity: 1; }

 <mat-form-field class="example-full-width"> <input matInput placeholder="Email" [formControl]="emailFormControl" class="custom-placeholder" [errorStateMatcher]="matcher" [(ngModel)]="email">

where custom-placeholder is class added on input

Answer 2

I don't think I understand your question properly, but if you want to change the color of the placeholder text try this css:

::placeholder { 
  color: blue;
  opacity: 1; 
}

Answer 3

You can change the placeholder color to blue by adding this css code

 ::placeholder { color: blue; opacity: 1; /* Firefox */ }

 <mat-form-field class="example-full-width"> <input matInput placeholder="Email" [formControl]="emailFormControl" [errorStateMatcher]="matcher" [(ngModel)]="email">