Как изменить цвет шрифта заполнителя matInput

Question

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

Мне нужно изменить цвет тега «Email», по умолчанию он черный. Я попробовал style = "color: blue" до сих пор не работает.

Answer 1

Не думаю, что правильно понимаю ваш вопрос, но если вы хотите изменить цвет текста заполнителя, попробуйте это css:

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

Answer 2

Вы можете изменить цвет заполнителя на синий, добавив css код

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

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

Answer 3

Вы можете сделать что-то вроде этого:

.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">

, где пользовательский заполнитель - это класс, добавленный на вход