猿问

选择选项后,如何将 Angular Material mat-autocomplete 文本颜色更

我不想更改占位符颜色,因为我已经完成了,但选择一个选项后,文本颜色仍然是黑色。


这是我的 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>

这是我的 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;}


largeQ
浏览 151回答 3
3回答

人到中年有点甜

要删除垫输入自动填充,background color您可以简单地使用 在您的主要 style.scss/css您可以使用.mat-form-field-autofill-control{&nbsp; background-color: wheat; // your prefered color&nbsp;}

婷婷同学_

对于角度 10组件.sccs.buscador {&nbsp; &nbsp; color: white !important;}:host ::ng-deep .mat-form-field-underline {&nbsp; &nbsp; background-color: white !important;&nbsp;&nbsp;}&nbsp;:host ::ng-deep .mat-focused .mat-form-field-underline .mat-form-field-ripple {&nbsp;background-color: white !important;}组件.html&nbsp; <form>&nbsp; &nbsp; <mat-form-field>&nbsp; &nbsp; &nbsp; &nbsp; <mat-label id="placeholder" class="buscador">Buscar...</mat-label>&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto" type="text" name="option" required minlength="3">&nbsp; &nbsp; &nbsp; &nbsp; <mat-autocomplete #auto="matAutocomplete" name="option">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <mat-option *ngFor="let option of options | async" [value]="option">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{option}}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </mat-option>&nbsp; &nbsp; &nbsp; &nbsp; </mat-autocomplete>&nbsp; &nbsp; </mat-form-field></form>

摇曳的蔷薇

我确实找到了如何更改它,需要添加此代码来更改输入的类颜色。::ng-deep&nbsp;input.mat-input-element&nbsp;{&nbsp;color:&nbsp;white;&nbsp;}
随时随地看视频慕课网APP

相关分类

Html5
我要回答