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/bxbvndrp

Answer 1

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

Answer 2

Because, when you using Angular one common attribute will be rendered in DOM like ng-content which will over write your class properties written in CSS, so try this code this will eliminate native Angular styles to use in application.

Go to the Component,

import {ViewEncapsulation} from '@angular/core';

Then

@Component({
.....
.....
encapsulation: ViewEncapsulation.None
})

Then your styles will taken by browser.

Answer 3

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 4

to change the color and width it worked for me -

::-webkit-scrollbar {
    width: 4px;
    overflow-y: scroll;
    background: grey;
    box-shadow: inset 0 0 4px #707070;
}

::-webkit-scrollbar-thumb {
    background: blue;
    border-radius: 10px;
}