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.
<!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 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.
<!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 color;
Supported Browsers: The browser supported by value attribute in option tag are listed below: