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:
- fleXcroll: Supports keyboard, mouse wheel, and text selection aid;
- Custom Scrollbars: Based on Prototype;
- LinScroll: Based on jQuery.