如何更改Angular 5材质输入占位符? [英] How to change Angular 5 Material input placeholder?

问题描述

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

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

解决方案

要更改占位符的颜色，请覆盖.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

How do you change the placeholder colour on a angular/material input placeholder?

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

解决方案

To change the color of placeholder, override the color property of .mat-form-field-placeholder like:

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

  color:red;
}

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

  color:red;
}

To change the color of underline:

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

  background-color:red;
}

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

  background-color:red;
}

This works perfect. Demo: https://plnkr.co/edit/yF4kXJ500YzefLOnLKNe?p=preview

这篇关于如何更改Angular 5材质输入占位符?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！