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

提前感谢！

- Pedro Ramírez Pérez

---

你必须在使用 :focus 和 :active 时使用 :placeholder。 - Sameer

它没有起作用。我使用了：input::placeholder:focus:active。 - Pedro Ramírez Pérez

Answer 1

使用输入框的 "placeholder" 属性时，您可以通过简单的 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占位符进行操作，它只能与属性一起使用。

- Tom Lauda

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 */
}

- Santhosh V

---

我检查了元素，可能是一个覆盖样式的类。已添加到问题中。 - Pedro Ramírez Pérez

我已经在这个例子中应用了相同的解决方案：https://stackblitz.com/edit/angular-mat-form-field-heh77t?file=app/form-field-prefix-suffix-example.css - Santhosh V

Angular Material有一个单独的标签元素来表示占位符，而不是来自“input”元素。 - Santhosh V

从 Angular 文档中： "将 ::ng-deep 伪类应用于任何 CSS 规则都会完全禁用该规则的视图封装。应用 ::ng-deep 的任何样式都会变成全局样式。为了将指定的样式范围限定在当前组件及其所有后代元素中，请确保在 ::ng-deep 之前包含 :host 选择器。" - undefined