Angular Material forms background color

Question

I'm newbie in Angular and Angular material. I'm creating a form and want to change the background color for example for Red.

But instead of simply changing the background color, the red color get over the form.

<form class="example-form" style="background-color:red">
  <mat-form-field class="example-full-width">
    <mat-label>Favorite food</mat-label>
    <input matInput placeholder="Ex. Pizza" value="Sushi">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <mat-label>Leave a comment</mat-label>
    <textarea matInput placeholder="Ex. It makes me feel..."></textarea>
  </mat-form-field>
</form>

Here is an example on stackblitz: Example

Can someone say me, how is the correct way for setting the background color?

Thank you!

Answer 1

The default color of the elements is rgba(0, 0, 0, 0.04). That's black with 96% transparency. On white background it's similar to rgb(245, 245, 245). You can add the CSS rule

:host ::ng-deep .mat-form-field-flex {
  background: rgb(245, 245, 245);
}

to change the background color of the divs and keep the default color on all backgrounds.

See: https://stackblitz.com/edit/angular-ka5hm7-jxen6p?file=src/app/input-overview-example.css