[英]How can I change Angular Material mat-autocomplete text color to white after an option is chosen?
I am not looking to change the placeholder color as I've already got that done, but after selecting an option the text color is still black.我不想更改占位符颜色,因为我已经完成了,但是在选择一个选项后,文本颜色仍然是黑色。
This is my HTML这是我的 HTML
<form *ngIf="videos">
<mat-form-field class="search-form">
<input type="text" placeholder="Search Gamer-Tags" aria-label="Number" matInput [formControl]="myControl"
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption (optionSelected)='searchChange($event.option.value)'>
<mat-option class="auto-option" *ngFor="let option of filteredOptions | async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
This is my SCSS这是我的 SCSS
::ng-deep .mat-focused .mat-form-field-label {color: white !important;}
::ng-deep .mat-form-field-underline, ::ng-deep .mat-form-field-ripple {background-color: white !important; color: white !important }
::ng-deep .mat-form-field-empty.mat-form-field-label { color: white !important;}
::ng-deep .mat-form-field-ripple { background-color: white;}
I did find out how to change it, needed to add this code to change the input's class color.我确实找到了如何更改它,需要添加此代码来更改输入的 class 颜色。
::ng-deep input.mat-input-element { color: white; }
for Angular 10适用于 Angular 10
component.sccs组件.sccs
.buscador {
color: white !important;
}
:host ::ng-deep .mat-form-field-underline {
background-color: white !important;
}
:host ::ng-deep .mat-focused .mat-form-field-underline .mat-form-field-ripple {
background-color: white !important;
} }
component.html组件.html
<form>
<mat-form-field>
<mat-label id="placeholder" class="buscador">Buscar...</mat-label>
<input type="text" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto" type="text" name="option" required minlength="3">
<mat-autocomplete #auto="matAutocomplete" name="option">
<mat-option *ngFor="let option of options | async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.