CSS scrollbar-color Property
Description
The scrollbar-color
CSS property is used to customize the color of the scrollbar in web browsers. It allows web developers to specify two values: the color of the thumb (the draggable part of the scrollbar) and the color of the track (the background of the scrollbar). This property helps in enhancing the visual aesthetics and user experience of web pages by allowing designers to match the scrollbar's appearance with the overall design of the website. However, it's important to note that not all web browsers support this property, so it may not have consistent behavior across all platforms.
- Initial value
- auto
- Applies to
- scrolling boxes
- Inherited
- yes
- Computed value
- as specified
- Animatable
- by computed value type
- JavaScript syntax
- object.style.scrollbarColor
Syntax
scrollbar-color: auto | <color>{2}
Values
- autoDefault platform rendering for the track portion of the scrollbar, in the absence of any other related scrollbar color properties.
- <color>{2}Applies the first color to the scrollbar thumb, the second to the scrollbar track.
Example
<div class="scroller">
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
earthnut pea peanut soko zucchini.
</div>
.scroller {
width: 300px;
height: 100px;
overflow-y: scroll;
scrollbar-color: #007 #bada55;
}
Browser Support
The following table will show you the current browser support for the CSS scrollbar-color
property.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
118 | 118 | 64 | x | x |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
118 | 64 | x | x | x | x |
Last updated by CSSPortal on: 31st December 2023