CSS scrollbar-color Property
Example
Set the color of the scrollbar of an element:
div.scroller {
width: 300px;
height: 100px;
overflow-y: scroll;
scrollbar-color: pink lightblue;
}
Try it Yourself »
Definition and Usage
The scrollbar-color property specifies
the color of the scrollbar track (background) and thumb (the scroller).
| Default value: | auto |
|---|---|
| Inherited: | yes |
| Animatable: | no. Read about animatable |
| Version: | CSS Scrollbars Styling Module Level 1 |
| JavaScript syntax: | object.style.scrollbarColor="red blue" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| scrollbar-color | 121 | 121 | 64 | Not supported | 107 |
CSS Syntax
scrollbar-color: auto|color color;
Property Values
| Value | Description |
|---|---|
| auto | The browser sets the colors of the scrollbar. This is default |
| color color | The first color sets the color of the thumb of the scrollbar, and the second color sets the color of the track of the scrollbar |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
