Scrollbar coloring in IE 5.5+

Home

Developers have long whined for the ability to alter the browser's scrollbar colors, and starting in IE 5.5+, that wish is granted, through, what else, CSS!

The syntax

There are 7 CSS attributes responsible for controlling the scrollbar's coloring, everything from the background, foreground, to the little arrow at the two ends of the scrollbar. So without further adieu, here are our attributes!

Attributes (move mouse over them for description)

1) scrollbar-3dlight-color
2) scrollbar-arrow-color
3) scrollbar-base-color
4) scrollbar-darkshadow-color
5) scrollbar-face-color
6) scrollbar-highlight-color
7) scrollbar-shadow-color
8) scrollbar-track-color

These attributes can be applied not only to the BODY element, but basically any element on your page that contains a scrollbar (such as <TEXTAREA>), for refinement. This page would look nice with a gentle greenish right bar, wouldn't you say?

<style type="text/css">
BODY{
scrollbar-face-color:#DFFFBF;
scrollbar-shadow-color:green;
}
</style>

<BODY>
"
"
</BODY>

Scripting

As you can probably tell through the above examples, the CSS attributes relating to scrollbar coloring are scriptable. The syntax are simply the attribute themselves, but without the hyphens (-), and the first letter after the hyphen capitalized. For example:

<script type="text/javascript">
//changes color of scrollbar arrows to red
document.body.style.scrollbarArrowColor="red"
</script>

On a compatibility note, IE 5.5+ is the only browser that supports scrollbar coloring. Other browsers like Firefox and Opera 8 all do not.

Have fun painting your browser's scrollbars!