EN
CSS - set scrollbar colors
3
points
In this article we would like to show you how to set scrollbar colors using CSS.
Below we present solution that works in following browsers:
- Webkit based: Chrome, Edge and Safari browsers,
- Gecko based: Firefox browser.
Notes:
- read more about vendor prefixes and pseudo-elements in CSS,
- read more about CSS scrollbars in Firefox.
Runnable example:
// ONLINE-RUNNER:browser;
<!DOCTYPE>
<html>
<head>
<style>
.container {
height: 100px;
width: 100px;
overflow: scroll;
scrollbar-width: thin; /* <-------------- required by Firefox */
scrollbar-color: blue orange; /* <------- required by Firefox */
}
.container::-webkit-scrollbar { /* <--------- required by Chrome, Edge and Safari */
width: 12px; /* <--------------------------------- vertical scrollbar width */
height: 12px; /* <-------------------------------- horizontal scrollbar height */
}
.container::-webkit-scrollbar-track { /* <--- required by Chrome, Edge and Safari */
background: orange;
}
.container::-webkit-scrollbar-thumb { /* <--- required by Chrome, Edge and Safari */
background-color: red;
border-radius: 20px;
border: 2px solid gold;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>List_item_1</li>
<li>List_item_2</li>
<li>List_item_3</li>
<li>List_item_4</li>
<li>List_item_5</li>
</ul>
</div>
</body>
</html>