Colour Scrollbars with Internet Explorer

Internet Explorer 5.5 (and above) support some non-standard stylesheet commands that allow you to change the colour of the scrollbars on your pages to better blend with the actual colour of the page. If you are using one of these browsers you will see the effect on some sites where the author of the page has changed all of the scrollbars to match with the page background. The code that you use to achieve this effect is as follows.

 body{scrollbar-base-color: #e7f7ff;
scrollbar-arrow-color: #808080;
scrollbar-DarkShadow-Color: #0000ff;}
form{scrollbar-base-color: #c0c0c0;
scrollbar-arrow-color: #000000;

The scrollbar parameters on the body statement set the scrollbar colours for all of the scrollbars that appear on the page unless you define more specific colours to apply to scrollbars on other elements (as I have here for those on form fields). As with all stylesheet commands you can specify these commands externally, internally in the <style> tag within the <head> section of the page, or within the individual tags themselves. In each case the definition closest to the scrollbar will be the one to take effect.

There are in fact several other parameters that can be overridden to change the scrollbar colours around. You may like to experiment with the following parameters to see what effect you can achieve with your scrollbar.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow