CODEWITHSUNDEEP
angular-material
Ped
Ped

Reputation: 133

How do I change the new default background color of angular-material version 9 form controls?

In Angular Material version 9.0.0 (released today), the default background color changed on the AutoComplete, DatePicker, Input, and Select (see comparison to previous version from docs below).

Can this be easily changed (back to how it was in 8.2.3)? I don't want to start a style debate, but I prefer the no-background of 8.2.3 for my use case; I'd find it hard to upgrade if I couldn't keep it.

Background change from v8.2.3 to v9.0.0

Upvotes: 1

Views: 1330

Answers (2)

Ped
Ped

Reputation: 133

Future-traveler reference: this has been changed in the 9.1.0 release, to keep the same clear background by default.

To override, use the "appearance" attribute of a mat-form-field:

  <mat-form-field appearance="none">
    <mat-select>...</mat-select> 
  </mat-form-field>

"none" is just an invalid value; other values are 'fill', 'legacy', 'outline', 'standard'.

See https://stackoverflow.com/a/55394544/759567.

Upvotes: 1

S&#225;ndor Jankovics
S&#225;ndor Jankovics

Reputation: 898

Just simply create a custom stylesheet for the input. With the browser debugger tool find the the element which has the background and then simply write

Element{ background-color:transparent;}

Upvotes: 0

Related Questions