Currently I'm facing the issue that occurs after web browser auto fills the user input like in this screen: I tried it on two browsers and it looks simaliar (chrome adds white background and firefox yellow). From code it looks just like this (this is mat input but styling does change even on standard input): <form [formGroup]="loginForm" (ngSubmit)="onLoginSubmit()"> <mat-form-field appearance="outline" class="full-width"> <mat-label>Email</mat-label> <input matInput type="email" formControlName="email" required/> <mat-error *ngIf="loginForm.get('email')?.hasError('required')"> {{ 'common.validation.required' | translate }} </mat-error> <mat-error *ngIf="loginForm.get('email')?.hasError('email')"> {{ 'login.validation.invalid-email' | translate }} </mat-error> </mat-form-field> <mat-form-field appearance="outline" class="full-width"> <mat-label>{{ 'login.fields.password' | translate }}</mat-label> <input matInput type="password" formControlName="password" required/> <mat-error *ngIf="loginForm.get('password')?.hasError('required')"> {{ 'common.validation.required' | translate }} </mat-error> </mat-form-field> <button mat-flat-button type="submit" [disabled]="loginForm.invalid"> {{ 'login.log-in' | translate }} </button> </form> In browser inspector I could not find a definition of this styling, the browser do this somehow. Do you have any idea how do I can solve it? I tried many fixes thats only change the background color but I have a video background and I want it to be fully transparent. Continue reading...
