如何使用角度材质中的css更改md-input-container占位符颜色

Question

如何在Angular Material中使用css更改md-input-container占位符颜色？如下面的截图我有电话号码.和密码文本字段.电话号码.textfield有电话号码,密码有密码占位符名称.

Answer 1

在最后一个版本的angular中,您可以删除输入中的占位符,并在mat-form-field中添加mat-placeholder并使用类自定义css

HTML:

<mat-form-field>
    <input matInput type="text">
    <mat-placeholder class="placeholder">Search</mat-placeholder>
</mat-form-field>

CSS:

.mat-focused .placeholder {
    color: #00D318;
}

Answer 2

占位符被描绘成<label>在角材料.所以你实际上需要设置标签的样式而不是占位符.

只要您点击(焦点)输入,这<label>就像占位符一样向上滑动并转换为表单<label>.

所以你只需要应用这个CSS:

/* When the input is not focused */
md-input-container label {
  color: red;
}

/* When the input is focused */
md-input-container.md-input-focused label {
  color: blue;
}

看看这个Plunkr演示.

Answer 3

就像@Wenacary在这篇文章中所说的：如何更改Angular 5 Material输入占位符？

在最新版本的angular中，您可以删除输入中的占位符，并在mat-form-field中添加mat-placeholder并使用类自定义css

html：

<mat-form-field>
    <input matInput type="text">
    <mat-placeholder class="placeholder">Search</mat-placeholder>
</mat-form-field>

CSS：

.mat-focused .placeholder {
    color: #00D318;
}