Angular Material Styling

Question

I can seem to style the scrollbar on the mat-option field with css. I want to make the scrollbar a different size and color. Any help or direction would be appreciated.

I tried doing this below but it didn't work.

How to change the scrollbar styles in Angular Material select?

  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
    <mat-option *ngFor="let product of filteredProducts | async" [value]="product">
      {{ product.name }}
    </mat-option>
  </mat-autocomplete>

Answer 1

To apply style to the autocomplete panel, you simply add a class to the autocomplete element. See the docs on the 'class' @Input: https://material.angular.io/components/autocomplete/api#MatAutocomplete.

For example:

<mat-autocomplete class="custom-scroll" #auto="matAutocomplete" [displayWith]="displayFn">

And then in your global scss:

.custom-scroll.mat-autocomplete-panel {

    &::-webkit-scrollbar {
        width: 8px;
    }

    &::-webkit-scrollbar-track {
        border-radius: 4px;
        background-color: green;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: blue;
    }
}