How to change the color of the scrollbar for Microsoft Edge?

Question

I want make the scrollbar for my site dark and customize it. It works on Chrome with ::-webkit-scrollbar but it doesn't work on Edge -- I couldn't find way changing the scrollbar color on Microsoft Edge.

Does anyone know how to do this? Please help :)

Answer 1

There is currently no way to do this in Microsoft Edge. In IE there were vendor specific, non-standard, CSS properties to achieve this. These were removed in MS Edge as they could be used to target the browser and break compatibility with sites that were expecting old IE behaviour (the properties are very old). Unfortunately there are no good standard properties in CSS to replace these at the moment.

There is a UserVoice suggestion you can vote on to add a method to style scrollbars. We use this as one of the inputs when planning feature priorities in the EdgeHTML engine.

Answer 2

The following worked for me:

/* Works on Chrome, Edge, and Safari */

*::-webkit-scrollbar {   width: 12px; }  *::-webkit-scrollbar-track {   background: orange; }  *::-webkit-scrollbar-thumb {   background-color: blue;   border-radius: 20px;   border: 3px solid orange; } 

For more info: https://www.digitalocean.com/community/tutorials/css-scrollbars