css 如何在Angular Material中更改占位符的颜色?

ozxc1zmp  于 2023-05-08  发布在  Angular
关注(0)|答案(6)|浏览(247)

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 colorhow-do-i-change-md-input-container-placeholder-color-using-css-in-angular,但我仍然无法更改颜色,默认值仍然存在。

sf6xfgos

sf6xfgos1#

我能够用这样的东西来实现
在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>
t40tm48m

t40tm48m2#

我不确定这是否适用于Angular材质,但你可以尝试一下,在你的css中添加:

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

8tntrjer3#

以下是跨浏览器解决方案:

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;
}
<input placeholder="This is input color"/>
llycmphe

llycmphe4#

在全局css中复制并粘贴以下代码:

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

或者像你这样

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

63lcw9qa5#

HTML文件

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

CSS文件

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

颜色变量值的任何更改也将更改占位符颜色。

yb3bgrhw

yb3bgrhw6#

.mdc-text-field ::placeholder {
    color: red;
}

相关问题