Blue background color on Angular material input on view

Question

I have a login box in my login page.

I have username and password fields and i am using Angular material. Below is my html. On view, there is a blue background in the input boxes. How can i remove the blue background ?

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

are you trying to autocomplete the login fields? from browser suggestions? — nmanikiran, May 14 '20 at 05:19
even if you off `autocomplete="off"` and try to use browser suggestions it that case it will show like that can you please go through this https://stackoverflow.com/questions/15738259/disabling-chrome-autofill. — nmanikiran, May 14 '20 at 05:27

score 0 · Accepted Answer · answered May 14 '20 at 06:16

You can apply the following css which I have tried for my work

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

Make sure material styles don't override this. (Increase specificity as required)

If you have a material theme module apply this class in that

Blue background color on Angular material input on view

1 Answers1