Languages
[Edit]
EN

CSS - set scrollbar colors

3 points
Created by:
Dirask Community
5850

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:

  1. Webkit based: Chrome, Edge and Safari browsers,
  2. Gecko based: Firefox browser.

Notes:

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;
    }
    
    .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: 3px solid blue;
    }

  </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>

CSS

Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join