scrollbar-***-color: ***;

Browser
  • IE
  • O
Type
  • Extension

The scrollbar-***-color property changes the color of the scrollbars.
(*** = base, face, track, arrow, highlight, shadow, 3dlight, and darkshadow)

Applying this property to the BODY (or HTML) element applies the specified style to an entire page.

When you specify only the base color


body {
scrollbar-base-color: #ff0000;
}

When you specify the detailed color


body {
scrollbar-face-color: #ff8c00;
scrollbar-track-color: #fff8dc;
scrollbar-arrow-color: #ffffff;
scrollbar-highlight-color: #fff8dc;
scrollbar-shadow-color: #d2691e;
scrollbar-3dlight-color: #ffebcd;
scrollbar-darkshadow-color: #8b0000;
}
Property Value Explanation
scrollbar-base-color color code or name (1) the base color
scrollbar-face-color color code or name (2) the face color
scrollbar-track-color color code or name (3) the track color
scrollbar-arrow-color color code or name (4) the arrow color
scrollbar-highlight-color color code or name (5) the highlight color
scrollbar-shadow-color color code or name (6) the shadow color
scrollbar-3dlight-color color code or name (7) the 3D light color
scrollbar-darkshadow-color color code or name (8) the dark shadow color

Scrollbar image

The element to which the style should be applied
  • Standards mode : Apply these styles to the HTML element.
  • Quirks mode : Apply these styles to the BODY element.

Example

Quirks mode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>TAG index</title>

<style type="text/css">

body {
scrollbar-base-color: red;
scrollbar-arrow-color: white;
}

</style>

</head>
<body>



</body>
</html>
Output
Example pagenew window
Standards mode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TAG index</title>

<style type="text/css">

html {
scrollbar-base-color: red;
scrollbar-arrow-color: white;
}

</style>

</head>
<body>



</body>
</html>
Output
Example pagenew window
When there is textarea

The scrollbar of the textarea can be returned to the color of the default by specifying the "transparent" to the value. (MSIE only)


<html>
<head>
<title>TAG index</title>

<style type="text/css">

body {
scrollbar-base-color: red;
scrollbar-arrow-color: white;
}

textarea {
width: 300px;
height: 7em;
}

#example {
scrollbar-base-color: transparent;
scrollbar-arrow-color: transparent;
}

</style>

</head>
<body>

<form method="POST" action="example.cgi">

<p>
<textarea name="message1">
The specified color is applied to this textarea.
</textarea>
</p>

<p>
<textarea name="message2" id="example">
This textarea is returned to the color of the default.
</textarea>
</p>

</form>

</body>
</html>
Output
Example pagenew window