CODEWITHSUNDEEP
htmlcssangular-material
rafbanaan
rafbanaan

Reputation: 631

mat-form-field input has same background as page defined with CSS

I have the following code:

Html:

<form fxLayout="column" fxLayoutAlign="center center"
 [formGroup]="deleteForm" (ngSubmit)="onSubmitForm()">
    <mat-form-field color="accent"  appearance="outline">
      <input
        type="password"
        matInput
        required
        placeholder="Re-enter your password"
        formControlName="password">
      <mat-error>Please re-enter your password.</mat-error>
    </mat-form-field></button>
    <mat-spinner *ngIf="isLoading$ | async"></mat-spinner>
<button *ngIf="!(isLoading$ | async)" type="submit" mat-flat-button
 color="accent" [disabled]="deleteForm.invalid">Remove</button>

  </form>

ts file:

this.deleteForm = new FormGroup({
      password: new FormControl('', {
        validators: [Validators.required]
      })
    });

For some reason my mat-form-field has the same background color has my background css for the page.
E.g. My background was white.. so my forms was not visible because the mat-form-fields were also white.
Now I went with a darker color as a background so my fields are visible, but only the text is now visible (that's still white). Image added of the result.

enter image description here

I have no clue what the issues might be.

Upvotes: 0

Views: 1490

Answers (1)

G. Tranter
G. Tranter

Reputation: 17958

For some reason my mat-form-field has the same background color has my background css for the page.

This is normal. Form fields do not have any background - they are transparent. Whatever is 'behind' the form fields will determine the background.

I have no clue what the issues might be.

You are trying to style various aspects of your app and the Angular Material components using your own CSS but without using theming. If you have themed your app properly, all colors including foreground and background will work properly together. If you try to bypass theming by applying your own background colors to pages for example, you may encounter conflicts and run into problems like the one you are having.

It sounds like you want a 'dark' theme - light text on a dark background. You can do that by applying a dark theme - either a predefined one or a custom one. For more information, refer to the theming guide: https://material.angular.io/guide/theming.

There are plenty of posts here on how to customize theming including changing foreground and background colors.

Upvotes: 1

Related Questions