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

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.