如何更改Angular 5 Material输入占位符？

Question

如何更改角度/材质输入占位符上的占位符颜色？

<mat-form-field>
    <input matInput placeholder="Name">
  </mat-form-field>

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

若要更改占位符的颜色,请覆盖.mat-form-field-placeholder的color属性,如:

::ng-deep .mat-form-field-placeholder{

  color:red;
}

::ng-deep .mat-focused .mat-form-field-placeholder{

  color:red;
}

要更改下划线的颜色:

::ng-deep .mat-form-field-underline .mat-form-field-ripple{

  background-color:red;
}

::ng-deep .mat-form-field-underline{

  background-color:red;
}

这很完美.演示:https://plnkr.co/edit/yF4kXJ500YzefLOnLKNe？p = preview

Answer 3

我正在使用有角度的材料 8.2.3 并且上述解决方案都不适用于我，并且在 theme.scss（材料主题文件）中有以下内容对我有用

.mat-input-element::placeholder{
   color: red;
}

与穿孔相反，以下应该适用于组件样式

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

Answer 4

在使用最新的角度为6的角材料时，我从上面找不到任何答案。

这是工作解决方案

::ng-deep .mat-form-field-label{
    color:#000 !important;
}