如何使用 angular material 中的 css 更改 md-input-container 占位符颜色?
How do I change md-input-container placeholder color using css in angular material?
如何使用 Angular Material 中的 css 更改 md-input-container 占位符颜色?正如下面的截图,我有 phone 没有。和密码文本字段。 Phone 没有。文本字段有 Phone 号,密码有密码占位符名称。
占位符在 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。
在Angular4+
首先,您需要关闭 ViewEncapsulation 以设置 Material 元素的样式。请注意,这会破坏 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:
中给你的 元素一个唯一的 class
<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;
}
对于具有 mat 前缀而不是 md 前缀的 material 的较新版本,您可以在2 种方式:
方式1:使用视图封装设置为none然后在组件css文件中写入样式,就像@user2245995在上面回答。
虽然这是 angular 建议的方式,但请注意,您在此处编写的样式将传播到所有 child/parent 组件并影响那里的其他元素。
方式 2:我们可以使用 shadow piercing 后代组合器 即 /deep/ 或 ::ng- deep or >>> 下面是一个例子
/deep/ label.mat-input-placeholder {
color: #fff; // choose the color you want
}
虽然目前 angular 文档中指定了此方法,但他们已经提到此方法将很快被弃用。
阅读更多:https://angular.io/guide/component-styles#!#-deep-
在 angular 的最新版本中,您可以删除输入中的占位符并在 mat-form-field 并使用 class
自定义 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;
}
.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
大纲、标签为空、标签、下划线、输入元素、占位符文本。
我正在使用 Angular 8.2.2 和 Angular Material 8.2.2
我试图尽可能确定垫子输入的颜色,我敢在这里分享结果,希望它能帮助其他人(占位符颜色自定义需求已处理,如问题中所问) :
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);
}
}
}
如何使用 Angular Material 中的 css 更改 md-input-container 占位符颜色?正如下面的截图,我有 phone 没有。和密码文本字段。 Phone 没有。文本字段有 Phone 号,密码有密码占位符名称。
占位符在 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。
在Angular4+
首先,您需要关闭 ViewEncapsulation 以设置 Material 元素的样式。请注意,这会破坏 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;
}
对于具有 mat 前缀而不是 md 前缀的 material 的较新版本,您可以在2 种方式:
方式1:使用视图封装设置为none然后在组件css文件中写入样式,就像@user2245995在上面回答。 虽然这是 angular 建议的方式,但请注意,您在此处编写的样式将传播到所有 child/parent 组件并影响那里的其他元素。
方式 2:我们可以使用 shadow piercing 后代组合器 即 /deep/ 或 ::ng- deep or >>> 下面是一个例子
/deep/ label.mat-input-placeholder {
color: #fff; // choose the color you want
}
虽然目前 angular 文档中指定了此方法,但他们已经提到此方法将很快被弃用。 阅读更多:https://angular.io/guide/component-styles#!#-deep-
在 angular 的最新版本中,您可以删除输入中的占位符并在 mat-form-field 并使用 class
自定义 csshtml :
<mat-form-field>
<input matInput type="text">
<mat-placeholder class="placeholder">Search</mat-placeholder>
</mat-form-field>
css:
.mat-focused .placeholder {
color: #00D318;
}
.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
大纲、标签为空、标签、下划线、输入元素、占位符文本。
我正在使用 Angular 8.2.2 和 Angular Material 8.2.2
我试图尽可能确定垫子输入的颜色,我敢在这里分享结果,希望它能帮助其他人(占位符颜色自定义需求已处理,如问题中所问) :
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);
}
}
}