如何更改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

你可以这样做：

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

其中自定义占位符 class 添加到输入

Answer 2

我觉得我没有正确理解你的问题，但如果你想更改占位符文本的颜色，试试这个 css：

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

Answer 3

您可以通过添加此 css 代码将占位符颜色更改为蓝色

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

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

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

How to change font colour of matInput placeholder

html

css

forms

placeholder

angular