Custom Scrollbar CSS
- In September 2018, W3C CSS Scrollbars defined specifications for customizing the appearance of scrollbars with CSS.
- As of 2020, 96% of internet users are running browsers that support CSS scrollbar styling.
- However, you will need to write two sets of CSS rules to cover Blink and WebKit and also Firefox browsers.
CSS Scrollbar Style
- CSS Scrollbars are supported by Firefox and ::-webkit-scrollbar by Chromium based (Chrome, Edge) and Safari.
- All modern browsers will eventually transition to CSS Scrollbars specification.
- Currently, styling scrollbars for Chrome, Edge, and Safari is available with the vendor prefix pseudo-element -webkit-scrollbar.
The scrollbar-color CSS property sets the color of the scrollbar track and thumb.
Style ScrollBar
Scroll Border
/* Firefox */ * { scrollbar-width: thick; /* none | auto */ scrollbar-color: #ffa07a transparent; } /* The first applies to the thumb of the scrollbar, the second to the track. */ /* Firefox */ /* Chrome, Edge, Safari */ *::-webkit-scrollbar { width: 14px; /* vertical scrollbar */ height: 14px; /* horizontal scrollbar */ } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: #ffa07a; border-radius: 14px; border: calc(14px / 4) solid #ccc; } *::-webkit-scrollbar-thumb:hover { background: #ff7f50; } /* Chrome, Edge, Safari */
Currently, styling scrollbars for Chrome, Edge, and Safari is available with the vendor prefix pseudo-element -webkit-scrollbar.