Question

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

其中custom-placeholder是在输入中添加的类

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占位符的字体颜色

3 个答案: