我如何在角材料中使用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> ="noreferrer">角度材料.因此,您实际上需要设置标签的样式而不是占位符.
在输入上单击(聚焦)后,此<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演示 ./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屋!