问题描述
我正在使用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,但是我仍然无法更改颜色,并且默认值仍然存在。
解决方法
在您的全局css
中复制并粘贴以下代码:
input::placeholder {
opacity: 1 !important;
color: #FFF !important;
}
或者您的情况
mat-form-field input::placeholder {
opacity: 1 !important;
color: #FFF !important;
}
,
我不确定这是否适用于Angular材质,但您可以尝试一下, 在您的CSS中添加:
::-webkit-input-placeholder{
color:red
}
,
以下是跨浏览器解决方案:
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"/>
,
我能够使用类似的东西
为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>
,
HTML 文件
<input [style.color]="color" type="text" class="placeholder-color" placeholder="xyz" />
CSS 文件
::placeholder {
color: var(--placeholder-color);
}
颜色变量值的任何变化也会改变占位符颜色。