IE Scroll Bar Colors CSS

Category: CSS
Reviewed by: bobbonew   
Reviewed on: Mar 30 2004
» Discuss this topic ( Posts)

I'm sure you've all seen one site or another with coloured scroll bars. This effect is NOT a part of the CSS standard and ONLY works on IE 5.5+ browsers. Note however that to date other browsers that do not support this code do NOT have any rendering problems.

To achieve this effect you have to assign colors to "scrollbar-" attributes in the body tag:

Just like in regular HTML colour assignment, you can use names or hexadecimals. You can also leave out any attributes you don't plan on colouring.

To the right is an image representation relating which attribute affects which colour. To make the image more readable I do not show the "scrollbar-" prefix. To be able to use the below illustration as a guide then, you simply take the name, and prefix it with "scrollbar-". For instance, the first part shown in the illustration is "arrow-color". To change arrow colour you would use:

scrollbar-arrow_color: red;

Standards Advocacy

Most designers are very stringent followers of standards: HTML should validate (preferably as XHTML) using w3's validator, and so should CSS. This particular "IE" trick will fail a standards validation - so it's up to you whether you want to use it. We don't use it on any sites we develop ourselves, but many people have asked for this type of information and it is a popular "trend" on some sites.

  1. Scroll bar colors with CSS