scrollbar color

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

Browser
Internet Explorer5.5 Opera7
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 modeInternet Explorer5.5Opera7

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

Standards modeInternet Explorer5.5

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

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 page