CSS | scrollbar-color Property - GeeksforGeeks

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:
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:
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:
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:
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:
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:
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: 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:
Supported Browsers: The browsers supported by scrollbar-color property are listed below:
Firefox 64
CSS-Properties
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript