[Fixed] Angular Material forms background color

Issue

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!

Solution

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