如何更改 Angular Material 中占位符的颜色？答案

【问题标题】：How to change the color of a placeholder in Angular Material?如何更改 Angular Material 中占位符的颜色？
【发布时间】：2020-12-28 16:00:55
【问题描述】：

我正在使用 Angular 9 和 Angular Material 10.2.0。

我的代码是：

<mat-form-field> 
 <input matInput type="text" name="" placeholder="title" id="title" [(ngModel)]="titleValue" >
</mat-form-field>

我关注了how to change text box placeholder color和how-do-i-change-md-input-container-placeholder-color-using-css-in-angular，但是还是不能改颜色，默认还是有的。

【问题讨论】：

标签： html css angular angular-material

【解决方案1】：

我能够使用这样的东西来实现

在您的 css/scss 文件中为属性使用一个变量。并利用 ElementRef 在运行时设置 css/scss 文件中声明的属性。

input {
    display: block;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    color: #333333;
    --placeHolder-color: #959595;
  }

  input::placeholder {
    color: var(--placeHolder-color);
  }

  input::-webkit-input-placeholder { /* Edge */
    color: var(--placeHolder-color);
  }

  input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--placeHolder-color);
  }

  input:-moz-placeholder {
    color: var(--placeHolder-color);
  }

  input::-moz-placeholder {
    color: var(--placeHolder-color);
  }

import { Directive, ElementRef, Host, Renderer2 } from '@angular/core';
import { CardNumberComponent } from 'src/app/themes/card-number/card-number.component';

@Directive({
  selector: '[appInputStyle]'
})
export class InputStyleDirective {

  private input: HTMLInputElement;

  constructor(private el: ElementRef, private renderer: Renderer2) {
    this.input = this.el.nativeElement;
  }

  ngOnInit() {
    this.input.style.setProperty('--placeHolder-color', 'tomato');
  }
}

<input type="text" appInputStyle>

【讨论】：

【解决方案2】：

我不确定这是否适用于 Angular 材料，但你可以试一试，在你的 CSS 添加：

::-webkit-input-placeholder{
    color:red
}

【讨论】：

这实际上适用于默认输入文本框，但我正在添加 matInput 属性，因此它不允许通过这种方式更改颜色

【解决方案3】：

以下是跨浏览器的解决方案：

input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: red;
}
input::-moz-placeholder { /* Firefox 19+ */
  color: red;
}
input:-ms-input-placeholder { /* IE 10+ */
  color: red;
}
input:-moz-placeholder { /* Firefox 18- */
  color: red;
}

&lt;input placeholder="This is input color"/&gt;

【讨论】：

这实际上适用于默认输入文本框，但我正在添加 matInput 属性，因此它不允许通过这种方式更改颜色

【解决方案4】：

在您的全局css 中复制并粘贴以下代码：

input::placeholder {
   opacity: 1 !important;
   color: #FFF !important;
}

或者在你的情况下

mat-form-field input::placeholder {
   opacity: 1 !important;
   color: #FFF !important;
}

【讨论】：

你需要把它包含在你的全局css中。这对我有用
这实际上适用于默认输入文本框，但我正在添加 matInput 属性，因此它不允许通过这种方式更改颜色
尝试像我之前说的那样在你的全局css文件中添加它，不要忘记包含!important来表示占位符的不透明度和颜色。这应该有效。如果不尝试检查浏览器中的输入并测试它是否接受更改。
我添加了mat-form-field input::placeholder，因为这个也适用于我

【解决方案5】：

HTML 文件

<input [style.color]="color" type="text" class="placeholder-color" placeholder="xyz" />

CSS 文件

::placeholder {
    color: var(--placeholder-color);
}

颜色变量值的任何变化也会改变占位符的颜色。

【讨论】：