Open In App

CSS scrollbar-color Property

Improve
Improve
Like Article
Like
Save
Share
Report

In CSS, scrollbar-color property allows customizing the colors of scrollbar components, such as the thumb and track.

It accepts two values: one for the thumb color and another for the track color. 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;
/*
scrollbar-color: dark-shadow light-shadow;
*/

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’s default colors for rendering the scrollbar. 
  • 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. 
  • 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. 
  • inherit: It is used to inherit the color from its parent. 

CSS scrollbar-color Property Examples

Example 1: In this example The CSS scrollbar-color property is set to auto in the .scrollbar-auto class, allowing the browser to automatically determine the scrollbar colors based on system preferences. The container displays a scrollbar with these colors.

html




<!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:

scrollbar Color Auto example

scrollbar-color: auto:

 Example 2: In this example The CSS scrollbar-color property in the .scrollbar-colored class sets the scrollbar colors to red and green. The container displays a scrollbar with these specified colors alongside its content.

html




<!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:

scrollbar-color-color

scrollbar-color: color color;

Supported Browsers: The browser supported by value attribute in option tag are listed below:



Last Updated : 07 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads