107 words
1 minute
Customizing IE Scrollbar

Today someone is asking how to customize the color of IE scrollbar. The following code works for HTML:

body
{
scrollbar-face-color: #E3F1D1;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #ABD48F;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color: #247624;
scrollbar-track-color: #ededed;
scrollbar-darkshadow-color: #247624;
}

But not for XHTML. For XHTML page, it should be like this:

html
{
scrollbar-face-color: #E3F1D1;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #ABD48F;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color: #247624;
scrollbar-track-color: #ededed;
scrollbar-darkshadow-color: #247624;
}

These CSS work in IE 6 and IE 7, and is not supported by Firefox, Opera, Safari. In those browsers, the customized scrollbar has to be emulated. And here are some resources:

Customizing IE Scrollbar
https://dixin.github.io/posts/customizing-ie-scrollbar/
Author
Dixin
Published at
2007-11-22
License
CC BY-NC-SA 4.0