Customize browser scrollbars with CSS instead of adding a JavaScript library solely for their appearance.
CSS provides several ways to adjust scrollbar colors, dimensions, and related details. The available controls depend on the browser and the properties it supports.
Scrollbar appearance is not identical across browsers. Use the examples below as a starting point and test the results in the browsers your audience uses.
This article compares the WebKit scrollbar pseudo-elements with the standard scrollbar properties used in the second example.
WebKit scrollbar pseudo-elements
WebKit scrollbar pseudo-elements are supported in several Blink- and WebKit-based browsers.
The following pseudo-elements target different parts of a scrollbar:
- ::-webkit-scrollbar — the entire scrollbar.
- ::-webkit-scrollbar-button — the buttons on the scrollbar (arrows pointing upwards and downwards).
- ::-webkit-scrollbar-thumb — the draggable scrolling handle.
- ::-webkit-scrollbar-track — the track (progress bar) of the scrollbar.
- ::-webkit-scrollbar-track-piece — the part of the track (progress bar) not covered by the handle.
- ::-webkit-scrollbar-corner — the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet.
- ::-webkit-resizer — the draggable resizing handle that appears at the bottom corner of some elements.
For a basic treatment, define the width or height and background on ::-webkit-scrollbar, then set the draggable handle’s color with ::-webkit-scrollbar-thumb:
/* Adjust scrollbar width and background color in non-Firefox browsers */
.scrollbar-container::-webkit-scrollbar {
height: 8px;
width: 8px;
background-color: #ddd;
border-radius: 8px;
}
/* Adjust scrollbar thumb background color in non-Firefox browsers */
.scrollbar-container::-webkit-scrollbar-thumb {
background-color: #f1662a;
border-radius: 8px;
}The example also uses border-radius to round the scrollbar elements.
Scrollbar width and color
The next example uses scrollbar-width and scrollbar-color.
These properties offer a compact way to set scrollbar width and colors. Their controls differ from the WebKit pseudo-elements, so test the combined styles in your target browsers:
/* Adjust scrollbar width and color in Firefox */
.scrollbar-container {
scrollbar-width: thin; /* Accepts auto, thin, and none values */
scrollbar-color: #f1662a #ddd; /* Takes two color values, first for the track and second for the thumb */
}Combine the styles
The complete example includes both approaches. Compare its appearance across browsers:
<style>
/* Adjust scrollbar width and color in Firefox */
.scrollbar-container {
scrollbar-width: thin; /* Accepts auto, thin, and none values */
scrollbar-color: #f1662a #ddd; /* Takes two color values, first for the track and second for the thumb */
}
/* Adjust scrollbar width and background color in non-Firefox browsers */
.scrollbar-container::-webkit-scrollbar {
height: 8px;
width: 8px;
background-color: #ddd;
border-radius: 8px;
}
/* Adjust scrollbar thumb background color in non-Firefox browsers */
.scrollbar-container::-webkit-scrollbar-thumb {
background-color: #f1662a;
border-radius: 8px;
}
.scrollbar-container {
height: 100%;
overflow: auto;
font-family: sans-serif;
font-size: 14px;
line-height: 1.4;
padding: 0 1em;
}
</style>
<div class='scrollbar-container'>
<h4>Orange Scrollbar Example</h4>
<p>Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor. Proin at nulla elementum, consectetur ex eget, commodo ante. Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus blandit quam turpis, at mollis velit pretium ut. Nunc consequat efficitur ultrices. Nullam hendrerit posuere est. Nulla libero sapien, egestas ac felis porta, cursus ultricies quam.</p>
<p>Vestibulum tincidunt accumsan sapien, a fringilla dui semper in. Vivamus consectetur ipsum a ornare blandit. Aenean tempus at lorem sit amet faucibus. Curabitur nibh justo, faucibus sed velit cursus, mattis cursus dolor. Pellentesque id pretium est. Quisque convallis nisi a diam malesuada mollis. Aliquam at enim ligula.</p>
<p>Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor. Proin at nulla elementum, consectetur ex eget, commodo ante. Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus blandit quam turpis, at mollis velit pretium ut. Nunc consequat efficitur ultrices.</p>
<p>Nullam hendrerit posuere est. Nulla libero sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum tincidunt accumsan sapien, a fringilla dui semper in. Vivamus consectetur ipsum a ornare blandit. Aenean tempus at lorem sit amet faucibus. Curabitur nibh justo, faucibus sed velit cursus, mattis cursus dolor. Pellentesque id pretium est. Quisque convallis nisi a diam malesuada mollis. Aliquam at enim ligula.</p>
<p>Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor. Proin at nulla elementum, consectetur ex eget, commodo ante. Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus blandit quam turpis, at mollis velit pretium ut. Nunc consequat efficitur ultrices. Nullam hendrerit posuere est. Nulla libero sapien, egestas ac felis porta, cursus ultricies quam.</p>
<p>Vestibulum tincidunt accumsan sapien, a fringilla dui semper in. Vivamus consectetur ipsum a ornare blandit. Aenean tempus at lorem sit amet faucibus. Curabitur nibh justo, faucibus sed velit cursus, mattis cursus dolor. Pellentesque id pretium est. Quisque convallis nisi a diam malesuada mollis. Aliquam at enim ligula.</p>
<p>Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor. Proin at nulla elementum, consectetur ex eget, commodo ante. Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus blandit quam turpis, at mollis velit pretium ut. Nunc consequat efficitur ultrices.</p>
<p>Nullam hendrerit posuere est. Nulla libero sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum tincidunt accumsan sapien, a fringilla dui semper in. Vivamus consectetur ipsum a ornare blandit. Aenean tempus at lorem sit amet faucibus. Curabitur nibh justo, faucibus sed velit cursus, mattis cursus dolor. Pellentesque id pretium est. Quisque convallis nisi a diam malesuada mollis. Aliquam at enim ligula.</p>
</div>Adjust the colors and dimensions to match your website’s design.
