Html 如何更改角度材质中占位符的颜色？

我使用的是Angular 9和Angular Material 10.2.0

我的代码是：

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

---

我遵循了和，但仍然无法更改颜色，默认值仍然存在。

在您的全局

css

中复制并粘贴以下代码：

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

还是你的情况

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

---

我不确定这是否适用于棱角材料，但你可以尝试一下， 在css中添加：

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

---

以下是针对此问题的跨浏览器解决方案：

input:：-webkit输入占位符{/*Chrome/Opera/Safari*/
颜色：红色；
}
输入：：-moz占位符{/*Firefox19+*/
颜色：红色；
}
输入：-ms输入占位符{/*IE 10+*/
颜色：红色；
}
输入：-moz占位符{/*Firefox 18-*/
颜色：红色；
}

---

我可以通过这样的方式实现

在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);
  }

顺便说一句，您需要将其包含在全局css中。这对Meth有效这实际上对默认输入文本框有效，但我正在添加matInput属性，因此不允许通过这种方式更改颜色尝试将其添加到全局css文件中，就像我前面所说的，不要忘记包含

！重要信息

用于占位符的不透明度和颜色。这应该行得通。如果没有，请尝试检查浏览器中的输入，并测试它是否接受更改。我添加了

mat form field input:：placeholder

，因为这一项也适用于Meth。这实际上适用于默认输入文本框，但我添加了matInput属性，因此不允许通过这种方式更改颜色。这实际上适用于默认输入textbox，但我添加了matInput属性，因此不允许通过这种方式更改颜色

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>