Customize Your Website's Scrollbars with CSS Scrollbar Selectors

While most browsers come with default scrollbar styles, they may not always match the design of your website. Fortunately, there's a way to customize them with CSS scrollbar selectors.

What are CSS Scrollbar Selectors?

CSS scrollbar selectors are pseudo-elements that allow you to customize the appearance of scrollbars on WebKit and Blink based browsers. These selectors let you modify the entire scrollbar, the scrolling handle, the track (progress bar) of the scrollbar, and even the bottom corner of the scrollbar where both horizontal and vertical scrollbars meet.

• ::-webkit-scrollbar – modifies the entire scrollbar.
• ::-webkit-scrollbar-thumb – modifies the draggable scrolling handle.
• ::-webkit-scrollbar-track – modifies the track of the scrollbar.