Scrollbar Color Change CSS

While many developers focus on layout, typography, and colors, one often overlooked element is the humble scrollbar. To change the default scrollbar color in CSS, you can use the the::-webkit-scrollbar selector along with various pseudo-elements to target different parts of the scrollbar. Let’s see how to change the color of the scrollbar in CSS deeply:

Default Scrollbar

To create Scrollbar, we need to set the “width”, “height”, and “overflow” to “scroll“.

HTML:

<div class="scroll">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

CSS:

.scroll{
  width: 200px;
  height: 110px;
  overflow: scroll;
}

Output:

See the above output, the default scrollbar color is light grey.

Change Scrollbar Color

• The scrollbar thumb represents the draggable part of the scrollbar.
• The scrollbar track refers to the background area behind the scrollbar thumb (the movable part of the scrollbar).
• A Scrollbar corner appears when both the vertical and horizontal scrollbars are present.

Before changing the color of the scrollbar, you should set the ‘width’ or ‘height’ of the scrollbar using the “::-webkit-scrollbar” selector, like.

::-webkit-scrollbar {
 width: 5px;
}

Note that: If you don’t set the scrollbar width or height, it doesn’t work even if you set the scrollbar thumb, track, and corner styles.

Changing the Track and thumb Color:

You can customize the scrollbar track using the “::-webkit-scrollbar-track“ pseudo-element selector. If you change the color of the track but don’t change the color of the thumb, the color of the thumb will automatically change to the color of the track.

::-webkit-scrollbar-track {
 background-color: blue;
}

You can customize the scrollbar thumb using the “::-webkit-scrollbar-thumb” pseudo-element selector.

::-webkit-scrollbar-thumb {
  background: red;
}

Output

You can also set your thumb to hover over colors like,

::-webkit-scrollbar-thumb:hover {
  background: red;
}

The thumb hover works when the user hovers the thumb.

Changing the Scrollbar corner Color:

You can customize the scrollbar corner using the “::-webkit-scrollbar-corner” pseudo-element selector.

::-webkit-scrollbar-corner {
  background-color: orange;
}

Output:

Cross-Browser Compatibility

It’s important to note that the scrollbar customization properties mentioned above are specific to WebKit-based browsers (such as Chrome and Safari). To ensure cross-browser compatibility, you should also include vendor-prefixed properties for Firefox and Edge.

For Firefox:

/* Track */
 scrollbar-track-color: #f2f2f2;
/* Thumb */
 scrollbar-thumb-color: #888;
/* Corner */
 scrollbar-corner-background-color: #f2f2f2;

For Edge:

/* Track */
 -ms-scrollbar-track-color: #f2f2f2;
/* Thumb */
 -ms-scrollbar-thumb-color: #888;
/* Corner */
 -webkit-scrollbar-corner-background-color: #f2f2f2;