Styling Scrollbars in Chrome, Edge, and Safari
Currently, styling scrollbars for Chrome, Edge, and Safari is available with the vendor prefix pseudo-element -webkit-scrollbar.
body::-webkit-scrollbar {
width: 12px; /* width of the entire scrollbar */
}
body::-webkit-scrollbar-track {
background: orange; /* color of the tracking area */
}
body::-webkit-scrollbar-thumb {
background-color: blue; /* color of the scroll thumb */
border-radius: 20px; /* roundness of the scroll thumb */
border: 3px solid orange; /* creates padding around scroll thumb */
}
Here is a screenshot of the scrollbar that is created with the above CSS rules:
Styling Scrollbars in Firefox
Here is an example that uses scrollbar-width and scrollbar-color properties:
body {
scrollbar-width: thin; /* "auto" or "thin" */
scrollbar-color: blue orange; /* scroll thumb and track */
}
Here is a screenshot of the scrollbar that is createdisng the above CSS rules:
