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>
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;
}
}
Use this if you want to change it all for scroll bars in your Angular project:
::-webkit-scrollbar {
width: 6px !important;
}
::-webkit-scrollbar-track {
border-radius: 4px !important;
background-color: #EFEFEF!important;
}
::-webkit-scrollbar-thumb {
border-radius: 4px !important;
background-color: #DCB064 !important;
}
