How to change the scrollbar styles in Angular Material select?

Question

We need help in changing the scrollbar in the Select component from Angular Material.

The following demo was implemented.

https://stackblitz.com/angular/bxbvndrpogl?file=app%2Fselect-reset-example.ts

However, I need help in changing the width and style of the scrollbar.

Example

Answer 1

Usually the way to customize the scroll is:

/* width */
::-webkit-scrollbar {
    width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: red; 
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #b30000; 
}

You cannot directly inspect the scroll from the dev tools, however you can see the styling of it if you inspect the div that has the overflow property with the scroll; value in it.

Answer 2

I hope I am not late, I had a similar problem with the native scroll bar.

The way I would solve this problem is to use Simple bar library then I would made directive and only wrap

 <mat-select placeholder="State">
    <div appSimpleBar>
       <mat-option>None</mat-option>
       <mat-option *ngFor="let state of states" [value]="state">{{state}}</mat-option>
    </div>
  </mat-select>

This will do the trick of hiding native scroll bar