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

【问题标题】：How to change font colour of matInput placeholder如何更改 matInput 占位符的字体颜色
【发布时间】：2020-07-21 20:40:00
【问题描述】：

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

我需要更改标签“电子邮件”的颜色，默认情况下它是黑色的。我试过 style="color:blue" 还是没有效果。

【问题讨论】：

标签： html css angular forms placeholder

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

我认为我没有正确理解您的问题，但如果您想更改占位符文本的颜色，请尝试以下 css：

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

【讨论】：

【解决方案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">

自定义占位符是在输入中添加的类

【讨论】：