[英]How to change the color of placeholder in a Material ui Autocomplete
[英]How to change the color of a placeholder in Angular Material?
我正在使用 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);
}
颜色变量值的任何更改也将更改占位符颜色。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.