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; }
Scrollbar color Browser Support
Since 2025 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in all modern browsers. May need a fallback for older browsers.
Your first month is free
Managed WordPress hosting for faster sites.
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.