Skip to content
Related Articles

Related Articles

CSS | scrollbar-color Property
  • Last Updated : 21 Nov, 2019

The scrollbar-color property is used to set the color of an element’s scrollbar. It can be used to control both the scrollbar track and scrollbar thumb colors separately.
The track of a scrollbar is the background of the scrollbar which stays fixed and shows the area that can be scrolled. The thumb of the scrollbar refers to the moving part of the scrollbar that floats on top of the track and denotes the current position of the scroll.

Syntax:

scrollbar-color: auto | color | dark | light | initial | inherit

Property Values:

  • auto: It is used to set the scrollbar color to be automatically set by the browser. It is the default value and provides the browser default colors for rendering the scrollbar.

    Example:




    <!DOCTYPE html>
    <html>
    <head>
      <title>
        CSS | scrollbar-color
      </title>
      <style>
        .scrollbar-auto {
          scrollbar-color: auto;
      
          height: 150px;
          width: 200px;
          overflow-y: scroll;
          background-color: lightgreen;
        }
      </style>
    </head>
    <body>
      <h1 style="color: green">
        GeeksforGeeks
      </h1>
      <b>
        CSS | scrollbar-color
      </b>
      <p>
        The container below has
        scrollbar-color set to 
        'auto'.
      </p>
      <div class="scrollbar-auto">
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained computer science
        and programming articles, quizzes and
        interview questions. The portal also
        has dedicated GATE preparation and
        competitive programming sections.
      </div>
    </body>
    </html>

    Output:
    auto

  • color: It is used to set the scrollbar color to any custom color. It takes two values, the first is applied to the scrollbar thumb and the second color is applied to the scrollbar track.

    Example:






    <!DOCTYPE html>
    <html>
    <head>
      <title>
        CSS | scrollbar-color
      </title>
      <style>
        .scrollbar-colored {
          scrollbar-color: red green;
            
          height: 150px;
          width: 200px;
          overflow-y: scroll;
          background-color: lightgreen; 
        }
      </style>
    </head>
    <body>
      <h1 style="color: green">
        GeeksforGeeks
      </h1>
      <b>
        CSS | scrollbar-color
      </b>
      <p>
        The container below has a
        red green scrollbar-color.
      </p>
      <div class="scrollbar-colored">
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained computer science
        and programming articles, quizzes and
        interview questions. The portal also
        has dedicated GATE preparation and
        competitive programming sections.
      </div>
    </body>
    </html>

    Output:
    color

  • light: It is used to provide a lighter variant of the scrollbar which can be based on the default colors or a custom one. This property has been discontinued on all major browsers.
  •   
    dark: It is used to provide a darker variant of the scrollbar which can be based on the default colors or a custom one. This property has been discontinued on all major browsers.

      

  • initial: It is used to set the color to its default value.

    Example:




    <!DOCTYPE html>
    <html>
    <head>
      <title>
        CSS | scrollbar-color
      </title>
      <style>
        .scrollbar-initial {
          scrollbar-color: initial;
      
          height: 150px;
          width: 200px;
          overflow-y: scroll;
          background-color: lightgreen;
        }
      </style>
    </head>
    <body>
      <h1 style="color: green">
        GeeksforGeeks
      </h1>
      <b>
        CSS | scrollbar-color
      </b>
      <p>
       The container below has
       scrollbar-color set to
       'initial'.
      </p>
      <div class="scrollbar-initial">
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained computer science
        and programming articles, quizzes and
        interview questions. The portal also
        has dedicated GATE preparation and
        competitive programming sections.
      </div>
    </body>
    </html>

    Output:
    initial

  • inherit: It is used to inherit the color from its parent.

    Example:




    <!DOCTYPE html>
    <html>
    <head>
      <title>
        CSS | scrollbar-color
      </title>
      <style>
        .scrollbar-colored {
          scrollbar-color: green blue;
      
          height: 150px;
          width: 200px;
          overflow-y: scroll;
          background-color: lightgreen;
        }
      
        .scrollbar-inherit {
          scrollbar-color: inherit;
      
          height: 75px;
          width: 100px;
          overflow-y: scroll;
        }
      </style>
    </head>
    <body>
      <h1 style="color: green">
        GeeksforGeeks
      </h1>
      <b>
        CSS | scrollbar-color
      </b>
      <p>
        The container below has
        a scrollable child element
        that inherits the parent's
        scrollbar color.
      </p>
      <div class="scrollbar-colored">
        <div class="scrollbar-inherit">
          This scrollbar color is inherited
          from the parent.
        </div>
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained computer science
        and programming articles, quizzes and
        interview questions. The portal also
        has dedicated GATE preparation and
        competitive programming sections.
      </div>
    </body>
    </html>

    Output:
    inherit

Supported Browsers: The browsers supported by scrollbar-color property are listed below:

  • Firefox 64
My Personal Notes arrow_drop_up
Recommended Articles
Page :