angularsassangular-materialbackground-colorangular-theming

How do I change the background color of mat-mdc-form-field appearance="outline"

For some reason cant find a working example of how to override the background color when form field is outlined, all the examples work for filled

Solution

  • The controls are always transparent since you might switch from light and dark mode, so all you need is a custom CSS, that sets the background color to achieve the desired effect.

    SCSS:

    .custom-background .mat-mdc-text-field-wrapper {
  background-color: azure;
}

    HTML:

    <p>
  <mat-form-field appearance="outline" class="custom-background">
    <mat-label>Outline form field</mat-label>
    <input matInput placeholder="Placeholder" />
    <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
    <mat-hint>Hint</mat-hint>
  </mat-form-field>
</p>

    Stackblitz Demo