1

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

Ped
  • 123
  • 1
  • 1
  • 7

2 Answers2

1

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.

Ped
  • 123
  • 1
  • 1
  • 7
0

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;}

Sándor Jankovics
  • 738
  • 1
  • 6
  • 19
  • Tried, and had no affect (on the mat-select at https://material.angular.io/components/select/overview ). Not unexpected for direct style application to have no effect on these components, depending on the property. – Ped Feb 07 '20 at 23:10
  • Add ::ng-deep selector and important and it will – Sándor Jankovics Feb 08 '20 at 13:13
  • ::ng-deep and !important are recommended against, not best practices, and have varying degrees of reliability when attempting angular-material style overrides. There should be a reliable/supported way to keep these controls looking the same as they always have - I shouldn't have to resort to hacks to upgrade. – Ped Feb 08 '20 at 14:11
  • I never had any issue with these selectors :) – Sándor Jankovics Feb 09 '20 at 16:04