Angular Mat-form-field 占位符颜色

Question

我有一个在mat-form-field 中输入的表单。它包含占位符，但我不知道如何设置占位符文本颜色。

当我之前没有关注输入时，占位符颜色为灰色：

当输入获得焦点时，它会变成紫色：

当输入失去焦点然后变成红色：

我的要求是换紫色的。我试过这个解决方案： https://css-tricks.com/almanac/selectors/p/placeholder/ 但它对我不起作用。

有什么想法吗？

更新：

这是被检查的输入：

<input _ngcontent-bqk-c14="" class="inputSearch input-textstyle mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored ng-pristine ng-invalid ng-touched" formcontrolname="description" matinput="" type="text" ng-reflect-autocomplete="[object Object]" ng-reflect-name="description" ng-reflect-placeholder="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Buscar" ng-reflect-type="text" autocomplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" id="mat-input-1" placeholder="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Buscar" aria-invalid="true" aria-required="false">

提前致谢！

Answer 1

使用输入“占位符”属性时，您可以使用简单的 css 选择器更改样式：

<mat-form-field>
  <mat-label>My label</mat-label>
  <input matInput type="text" placeholder="my placeholder"/>
</mat-form-field>

input::placeholder {
  color: green;
}

您不需要使用全局样式表。 它不会针对默认的mat-label 占位符，它只适用于属性

Answer 2

在style.scss文件中，放置如下样式

.mat-input-placeholder {
    color: red; /* Any color */
}

请注意，这将覆盖任何地方的 Angular Material 默认样式。 如果您只想在组件内部应用它，请将以下内容粘贴到 your.component.scss 文件中

::ng-deep .mat-input-placeholder { 
   color: red; /* Any color */
}