简体   繁体   English

选择选项后,如何将 Angular Material mat-autocomplete text color 更改为白色?

[英]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.

相关问题 使用 Angular 材料将 mat-select 转换为 mat-autocomplete - Convert mat-select to mat-autocomplete using Angular Material 将样式添加到 mat-autocomplete 的 mat-option - Adding Style to mat-option of mat-autocomplete 为 mat-autocomplete 的 mat-option 添加样式 - adding style to mat-option of mat-autocomplete 如何在 mat-autocomplete 中设置项目数 - How to set the number of items in mat-autocomplete 如何更改垫子错误(角材料)的颜色? - How to change color of mat-error (Angular Material)? 我怎样才能改变颜色<select>标签依赖于选择的选项(使用纯 JavaScript)? - How can I change the color of the <select> Tag dependent on the option chosen (using pure JavaScript)? mat-autocomplete 下拉菜单显示在 window [Angular] 的左上方 - mat-autocomplete dropdown shows up on top left of the window [Angular] 使用CSS选择选择菜单的一个选项后,如何更改文本颜色? - How can I change the text-color after choosing one option of the select-menu with css? 如何将Angular 5 Material Select下拉菜单(mat-select)更改为打字稿代码/文件中的选项之一? - How can I change an Angular 5 Material Select dropdown (mat-select) to one of the options in typescript code/file? 下拉框文本在完成功能后消失了,如何显示选择的选项? - Drop down box text disappears after completing a function, how can I get it to display what option was chosen?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM