我如何在角度材料中使用 css 更改 md-input-container 占位符颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41205931/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do i change md-input-container placeholder color using css in angular material
提问by digit
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.
如何在 Angular Material 中使用 css 更改 md-input-container 占位符颜色？作为下面的截图，我有电话号码。和密码文本字段。电话号码。文本字段有电话号码，密码有密码占位符名称。
回答by Wenakari
in the last version of angular you can remove the placeholder in the input and add a mat-placeholderin the mat-form-fieldand custom the css with a class
在 angular 的最新版本中，您可以删除输入中的占位符并在mat-form-field 中添加一个mat-placeholder并使用类自定义 css
html :
html :
<mat-form-field>
<input matInput type="text">
<mat-placeholder class="placeholder">Search</mat-placeholder>
</mat-form-field>
css:
css：
.mat-focused .placeholder {
color: #00D318;
}
回答by Saurav Rastogi
Placeholder is depicted as a <label>in Angular Material. So you actually need to style the label not the placeholder.
占位符<label>在Angular Material 中被描述为。所以你实际上需要设置标签而不是占位符的样式。
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>.
一旦您单击（聚焦）输入，这<label>看起来就像一个占位符会向上滑动并转换为表单<label>。
So you just need to apply this CSS:
所以你只需要应用这个 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.
看看这个Plunkr 演示。
回答by killer_kohlrabi
In Angular 4+
在 Angular 4+
First you will need to turn ViewEncapsulation off to style Material Elements. Be warned this is subverting the Angular emulated-shadow DOM default and you should proceed with caution (https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html).
首先，您需要关闭 ViewEncapsulation 以设置材质元素的样式。请注意，这会破坏 Angular 模拟阴影 DOM 的默认设置，您应该谨慎行事（https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html）。
In dummy.component.ts:
在 dummy.component.ts 中：
@Component({
...,
encapsulation: ViewEncapsulation.None,
})
Then give your < mat-form-field > element a unique class in dummy.component.html:
然后在 dummy.component.html 中给你的 < mat-form-field > 元素一个唯一的类：
<mat-form-field class="dummy-input-field" floatPlaceholder="always">
<input placeholder="Dummy"/>
</mat-form-field>
Finally in dummy.component.css apply the styling:
最后在 dummy.component.css 中应用样式：
.dummy-input-field .mat-input-placeholder {
color: red;
}
Similarly, if you'd like to dynamically change color if the field is focused:
同样，如果您想在字段聚焦时动态更改颜色：
.dummy-input-field.mat-focused .mat-input-placeholder {
color: red;
}
回答by rgantla
For the newer versions of material which have a matprefix instead of mdprefix, you can do this in 2 ways:
对于具有mat前缀而不是md前缀的较新版本的材料，您可以通过两种方式执行此操作：
way 1: using view encapsulationset to none and then writing the styles in the components css file, like @user2245995 pointed out in the answer above. Although this is the way angular suggests, please be advised that the styles you write here will propagate to all the child/parent components and effect other elements there.
方式1：使用视图封装设置为none，然后在组件css文件中写入样式，如@user2245995在上面的答案中指出的那样。尽管这是 angular 建议的方式，但请注意，您在此处编写的样式将传播到所有子/父组件并影响那里的其他元素。
way 2: We can use the shadow piercing descendant combinatorsi.e. /deep/or ::ng-deepor >>>Below is an example
方式 2：我们可以使用阴影穿透后代组合器，即/deep/或::ng-deep或>>>下面是一个例子
/deep/ label.mat-input-placeholder {
color: #fff; // choose the color you want
}
Although this method is specified in the angular docs as of now, they have mentioned that this method will soon be deprecated. read more: https://angular.io/guide/component-styles#!#-deep-
尽管目前在 angular 文档中指定了此方法，但他们提到此方法将很快被弃用。阅读更多：https: //angular.io/guide/component-styles#!#-deep-
回答by MaylorTaylor
.container {
.mat-form-field-outline,
.mat-form-field-empty.mat-form-field-label,
.mat-form-field-label,
.mat-form-field-underline,
.mat-input-element,
::placeholder {
color: $white !important;
}
}
The code above gives me the results below. I am overriding the form-fieldoutline, label-empty, label, underline, input element, placeholder text.
上面的代码给了我下面的结果。我正在覆盖form-field轮廓、标签空、标签、下划线、输入元素、占位符文本。
I'm using Angular 8.2.2 and Angular Material 8.2.2
我正在使用 Angular 8.2.2 和 Angular Material 8.2.2
