Autocomplete • Angular Material

Styles from the material/autocomplete package can be customized using the autocomplete-overrides mixin. This mixin accepts a set of tokens that control how the components will look, either for the entire app or under a specific selector. For example:

@use '@angular/material' as mat;

// Customize the entire app. Change :root to your selector if you want to scope the styles.
:root {
  @include mat.autocomplete-overrides((
    background-color: orange,
  ));
}

You can find the full list of supported mixins and tokens below.

Tokens supported by `autocomplete-overrides`

Filter by name

Filter by type

Filter by default value

Name	Type	Default value
`container-shape`	Base	--mat-sys-corner-extra-small
`container-elevation-shadow`	Base	0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)
`background-color`	Color	--mat-sys-surface-container

How to style autocomplete

Tokens supported by autocomplete-overrides

Tokens supported by `autocomplete-overrides`