视图上的角度材质输入上的蓝色背景颜色

Question

我的登录页面中有一个登录框。

我有用户名和密码字段，并且我正在使用 Angular 材料。下面是我的 html。在视图中，输入框有蓝色背景。如何去除蓝色背景？

       <form [formGroup]="reactiveForm" (ngSubmit)="onSubmit()">
            <div fxLayout="row" fxLayoutAlign="space-around center">
                <mat-form-field appearance="outline">
                    <mat-label>{{ 'auth.email' | translate }}</mat-label>
                    <input matInput type="email" email placeholder="{{ 'auth.email-placeholder' | translate }}" required formControlName="email" autocomplete="off">
                    <mat-icon matSuffix>email</mat-icon>
                    <mat-error *ngIf="reactiveForm.get('email').invalid">
                        {{ 'auth.error.email' | translate }}
                    </mat-error>
                </mat-form-field>
            </div>
            <div fxLayout="row" fxLayoutAlign="space-around center">
                <mat-form-field appearance="outline">
                    <mat-label>{{ 'auth.password' | translate }}</mat-label>
                    <input matInput type="password" placeholder="{{ 'auth.password-placeholder' | translate }}" required formControlName="password" autocomplete="off">
                    <mat-icon matSuffix>vpn_key</mat-icon>
                    <mat-error *ngIf="reactiveForm.get('password').invalid">
                        {{ 'auth.error.password' | translate }}
                    </mat-error>
                </mat-form-field>
            </div>
            <div fxLayout="row" fxLayoutAlign="space-around center">
                <button mat-raised-button color="primary" type="submit" [disabled]="!reactiveForm.valid">{{ 'auth.login-title' | translate }}</button>
            </div>
        </form>

Answer 1

您可以应用我在工作中尝试过的以下 css

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

确保材质样式不会覆盖此设置。（根据需要增加特异性）

如果您有一个材料主题模块，请在其中应用此类