Scrollbar styling without -webkit- pseudo-elements
Styling scrollbars required ::-webkit-scrollbar, ::-webkit-scrollbar-track, and ::-webkit-scrollbar-thumb — non-standard WebKit-only pseudo-elements that Firefox never supported. scrollbar-color and scrollbar-width are the standard two-property replacement.
2 scrollbar-width: thin;
3 scrollbar-color: #888 transparent;
4}
2::-webkit-scrollbar { width: 8px; }
3::-webkit-scrollbar-track { background: #f1f1f1; }
4::-webkit-scrollbar-thumb { background: #888; }
5::-webkit-scrollbar-thumb:hover {
6 background: #555; }
Browser Support for Scrollbar color
Since 2025 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in Firefox
::-webkit-scrollbar never worked in Firefox. scrollbar-color and scrollbar-width are supported in Chrome, Firefox, Safari, and Edge.
Two properties instead of six
scrollbar-color takes two values: thumb color and track color. scrollbar-width is thin, auto, or none. No pseudo-elements needed.
Use CSS custom properties
Both properties accept any CSS color value, including custom properties. Scrollbar colors can follow your theme variables.
How it works
The ::-webkit-scrollbar family of pseudo-elements let Chrome and Safari style scrollbars, but they were never part of the CSS standard and Firefox never implemented them. Styling scrollbars cross-browser required either a polyfill or accepting that Firefox users would see the default system scrollbar.
scrollbar-color takes two color values: the thumb and the track. scrollbar-width accepts auto, thin, or none. Both are inherited, so applying them to the root element styles all scrollbars on the page. Safari added support in version 26.2.