如何在角材料中使用 css 更改 md-input-container 占位符颜色？
Posted
技术标签:
【中文标题】如何在角材料中使用 css 更改 md-input-container 占位符颜色？【英文标题】：How do I change md-input-container placeholder color using css in angular material? 【发布时间】：2017-05-03 12:30:56 【问题描述】：如何在 Angular Material 中使用 css 更改 md-input-container 占位符颜色？如下图所示，我有电话号码。和密码文本字段。电话号码。文本字段有电话号码，密码有密码占位符名称。
【问题讨论】：
【参考方案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;
【讨论】：
很棒的解决方案！ 只是：.placeholder 颜色：#00D318;使用你的方法时为我工作。谢谢...很好的解决方案！ ✅✅✅✅ @PhillipJacobs 不客气！也谢谢，因为现在我知道我可以直接使用 .placeholder 而不一定是自定义类；）。 请注意，这只适用于外观="legacy" 的表单字段。对于外观=“标准”或其他值，您需要使用input::placeholder。
占位符在Angular Material 中被描述为<label>。所以你实际上需要设置标签而不是占位符的样式。
只要您单击（聚焦）输入，这个看起来像占位符的<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 Demo。
【讨论】：
Material 2 中的类名称相同，但此解决方案不再起作用 :( 如果您使用 md-no-float。在那种情况下，您不使用标签。您将如何更改该特定占位符的颜色。当我单击输入字段并再次聚焦颜色更改时，我使用此input.box::-webkit-input-placeholder, textarea.box::-webkit-input-placeholder color: white; bur 进行更改【参考方案3】：
在 Angular 4+ 中
首先，您需要关闭 ViewEncapsulation 以设置 Material Elements 的样式。请注意，这会破坏 Angular 模拟阴影 DOM 默认设置，您应该谨慎行事 (https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html)。
在 dummy.component.ts 中：
@Component(
...,
encapsulation: ViewEncapsulation.None,
)
然后在 dummy.component.html 中为您的
<mat-form-field class="dummy-input-field" floatPlaceholder="always">
<input placeholder="Dummy"/>
</mat-form-field>
最后在 dummy.component.css 中应用样式：
.dummy-input-field .mat-input-placeholder
color: red;
同样，如果您想在该字段获得焦点时动态更改颜色：
.dummy-input-field.mat-focused .mat-input-placeholder
color: red;
【讨论】：
【参考方案4】：.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;
上面的代码给了我下面的结果。我正在覆盖form-field outline、label-empty、label、underline、input element、placeholder text。
我正在使用 Angular 8.2.2 和 Angular Material 8.2.2
【讨论】：
【参考方案5】：对于具有 mat 前缀而不是 md 前缀的较新版本的材料，您可以通过 2 种方式执行此操作：
方式 1：使用 view encapsulation 设置为 none，然后在组件 css 文件中写入样式，就像上面答案中指出的 @user2245995 一样。 虽然这是 angular 建议的方式，但请注意，您在此处编写的样式将传播到所有子/父组件并影响那里的其他元素。
方式2：我们可以使用阴影穿透后代组合器，即/deep/或::ng-deep或> >> 下面是一个例子
/deep/ label.mat-input-placeholder
color: #fff; // choose the color you want
虽然目前在 Angular 文档中指定了此方法，但他们已经提到此方法将很快被弃用。 阅读更多：https://angular.io/guide/component-styles#!#-deep-
【讨论】：
【参考方案6】：我尝试尽可能确定垫子输入的颜色，我敢在这里分享结果，希望它对其他人有所帮助（已处理占位符颜色自定义需求，如问题中所述）：
使用的 CSS 自定义属性
注意：无论焦点是否在这里，颜色都被认为是不同的，这就是为什么我们在下面有2个块：
--clear-button-color: lightblue;
--asterisk-color: lightgreen;
--label-color: springgreen;
--underline-color: blue;
--input-color: lightgray;
--clear-button-focused-color: blue;
--asterisk-focused-color: green;
--label-focused-color: pink;
--underline-focused-color: yellow;
--input-focused-color: gray;
--placeholder-focused-color: magenta;
--caret-focused-color: blue;
SCSS 样式
.mat-form-field
&.mat-focused
> .mat-form-field-wrapper
> .mat-form-field-flex
> .mat-form-field-infix
> .mat-input-element
color: var(--input-focused-color);
caret-color: var(--caret-focused-color);
&::placeholder
color: var(--placeholder-focused-color);
> .mat-form-field-label-wrapper
> .mat-form-field-label
> mat-label
color: var(--label-focused-color);
> .mat-placeholder-required
color: var(--asterisk-focused-color);
> .mat-form-field-suffix
> .mat-focus-indicator
> .mat-button-wrapper
> .mat-icon
color: var(--clear-button-focused-color);
> .mat-form-field-underline
> .mat-form-field-ripple
background-color: var(--underline-focused-color);
background-color: var(--underline-focused-color);
> .mat-form-field-wrapper
> .mat-form-field-flex
> .mat-form-field-infix
> .mat-input-element
color: var(--input-color);
&::placeholder
color: var(--placeholder-color);
> .mat-form-field-label-wrapper
> .mat-form-field-label
> mat-label
color: var(--label-color);
> .mat-placeholder-required
color: var(--asterisk-color);
> .mat-form-field-suffix
> .mat-focus-indicator
> .mat-button-wrapper
> .mat-icon
color: var(--clear-button-color);
> .mat-form-field-underline
> .mat-form-field-ripple
background-color: var(--underline-color);
background-color: var(--underline-color);
【讨论】：
以上是关于如何在角材料中使用 css 更改 md-input-container 占位符颜色？的主要内容，如果未能解决你的问题，请参考以下文章