HTML Guides for scrollbar-color

The scrollbar-color property has a value that is neither auto nor a pair of colors, so browsers ignore the declaration and draw the default scrollbar.

scrollbar-color sets the colors of an element's scrollbars. It takes the keyword auto, which leaves the colors to the browser, or two colors separated by a space. The first color paints the thumb (the part you drag) and the second paints the track behind it. The CSS-wide keywords inherit, initial, unset and revert are accepted too. Any other word gets this message, with the rejected word quoted in it.

The values undefined and null usually come from JavaScript or a template that writes a variable into the style before it has a value, as in el.style.cssText = "scrollbar-color: " + theme.scrollbar. Older stylesheets may use dark or light, which an early draft of the specification allowed and the current one dropped. thin and none belong to scrollbar-width, not to this property.

A single color is also invalid, since the property needs both the thumb and the track. The validator reports scrollbar-color: #888 with a different message, "Too many values or values are not recognized".

To fix it, give the property two valid colors or auto, or leave the declaration out when there is no color to apply. In scripts, check that the variable is set before writing it into the style.

Invalid example

<div class="chat-log" style="height: 12rem; overflow-y: auto; scrollbar-color: undefined;">

<p>Messages appear here.</p>

</div>

<div class="sidebar" style="height: 12rem; overflow-y: auto; scrollbar-color: dark;">

<p>Filters appear here.</p>

</div>

Valid example

<div class="chat-log" style="height: 12rem; overflow-y: auto; scrollbar-color: #6b7280 #f3f4f6;">

<p>Messages appear here.</p>

</div>

<div class="sidebar" style="height: 12rem; overflow-y: auto; scrollbar-color: auto;">

<p>Filters appear here.</p>

</div>