无法更改 Angular 材质输入占位符的文本颜色

Question

我正在尝试更改 Angular Material 输入上的占位符文本颜色。似乎默认为黑色，但由于背景颜色较深，我希望它为白色。

我可能已经阅读了该网站上有关如何执行此操作的所有帖子，但似乎没有任何效果。 ::ng-deep 和 mat-placeholder 不是选项。

这是我的 HTML 中的一个 sn-p：

    <form #searchForm="ngForm" class="example-full-width mr-auto">
      <mat-form-field style="width: 350px; font-size: 14px; margin-bottom: -15px;">
        <mat-label style="color: white;">Search for an Employee</mat-label>
        <input matInput [(ngModel)]="userIdInput" placeholder="Enter at least 2 characters of a name or ID"

Answer 1

要更改placeholder 的css，您需要做的就是修改matInput 占位符的颜色。您可以使用matInput 元素中的mat-input-element 类来执行此操作。

理想情况下，我还建议您避免使用内联样式并改用类。它也使您的代码更具可读性。

HTML

<form #searchForm="ngForm" class="example-full-width mr-auto">
  <mat-form-field class="employee-search-field">
    <mat-label>Search for an Employee</mat-label>
    <input matInput [(ngModel)]="userIdInput" name="userIdInput" placeholder="Enter at least 2 characters of a name or ID"/>
  </mat-form-field>
</form>

在您的 css 中，添加以下代码。

.employee-search-field {
  width: 350px;
  font-size: 14px;
  margin-bottom: -15px;
}

.employee-search-field mat-label {
  color: white;
  /* add label text color here */
}

.employee-search-field .mat-input-element {
  color: white;
  /* add input text color here */
}

.employee-search-field .mat-input-element::placeholder {
  color: white;
  /* add placeholder css here */
}

Answer 2

试试这个

  <mat-form-field>
    <mat-label>Search for an employee</mat-label>
    <input matInput placeholder="Enter at least 2 characters of a name or ID">
  </mat-form-field>

.mat-form-field {
  width: 350px;
  font-size: 14px;
}

::ng-deep .mat-input-element::placeholder {
  color: orange;
}

::ng-deep .mat-form-field-appearance-legacy .mat-form-field-label {
  color: red;
}