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;
}

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

如果您有重要的主题模块，请在其中应用此类

视图上有角材料输入的背景为蓝色

1 个答案: