/* Keyword values */ scrollbar-color: auto;  /* <color> values */ scrollbar-color: rebeccapurple green;   /* Two valid colors. The first applies to the thumb of the scrollbar, the second to the track. */  /* Global values */ scrollbar-color: inherit; scrollbar-color: initial; scrollbar-color: revert; scrollbar-color: unset; 

scrollbar-color

The scrollbar-color CSS property sets the color of the scrollbar track and thumb.

The track refers to the background of the scrollbar, which is generally fixed regardless of the scrolling position.

The thumb refers to the moving part of the scrollbar, which usually floats on top of the track.

Syntax

/* Keyword values */ scrollbar-color: auto;  /* <color> values */ scrollbar-color: rebeccapurple green;   /* Two valid colors. The first applies to the thumb of the scrollbar, the second to the track. */  /* Global values */ scrollbar-color: inherit; scrollbar-color: initial; scrollbar-color: revert; scrollbar-color: unset; 

Values

Defines the color of the scrollbar.

Note: User Agents must apply any scrollbar-color value set on the root element to the viewport.

Accessibility concerns

When using scrollbar-color property with specific color values, authors should ensure the specified colors have enough contrast between them. For keyword values, UAs should ensure the colors they use have enough contrast. See Techniques for WCAG 2.0: G183: Using a contrast ratio of 3:1.

Formal definition

Formal syntax

auto | <color>{2}
where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<hwb()> = hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )
where <alpha-value> = <number> | <percentage><hue> = <number> | <angle>

Examples

Coloring overflow scrollbars

.scroller {   width: 300px;   height: 100px;   overflow-y: scroll;   scrollbar-color: rebeccapurple green; } 

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

Specifications

See also

Last modified: Aug 12, 2021, by MDN contributors