如何在角形材质中使用CSS更改md-input-container占位符颜色? [英] How do I change md-input-container placeholder color using css in angular material?

问题描述

如何在Angular Material中使用CSS更改md-input-container占位符颜色?如下面的屏幕截图所示，我有电话号码.和密码文本字段.电话号码.文本字段具有电话号码，密码具有密码占位符名称.

解决方案

占位符在< label> /api/directive/mdInputContainer"rel =" noreferrer>角度材料.因此，您实际上需要设置标签的样式而不是占位符.

在输入上单击(焦点)后，此< label> 看起来就像一个占位符一样滑上并转换为表单< label>

因此，您只需要应用此CSS:

 /*输入未聚焦时*/md-input-container标签{红色;}/*当输入为焦点时*/md-input-container.md-input-focused标签{颜色:蓝色；} 

看看这个 Plunkr演示 ./p>

How do I change md-input-container placeholder color using css in Angular Material? As screenshot below I have phone no. and password textfield. Phone no. textfield has Phone No. and password has Password placeholder name.

解决方案

Placeholder is depicted as a <label> in Angular Material. So you actually need to style the label not the placeholder.

As soon as you click (focus) on the input this <label> which is looking as a placeholder slides up and converted into a form <label>.

So you just need to apply this 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;
}

Have a look at this Plunkr Demo.

这篇关于如何在角形材质中使用CSS更改md-input-container占位符颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！