Languages
[Edit]
EN

CSS - set scrollbar colors

3 points
Created by:
Saim-Mccullough
328

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

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