Changing the appearance of the browser scrollbar

I wanted to call this tip "Why I love Internet Explorer" because you can only do this in Internet Explorer.  I would guess that most, if not all, hard-core Web developers know how to do this, but for any of you who don't and want to know, this tip's for you.

There may be some of you who will want to criticize this tip because it only shows up in Internet Explorer and not any other browser, but using the code provided here doesn't cause any script errors, and if you display a page that uses it in another browser, the browser will just ignore it, so no harm done.

When I first saw a page where the scrollbar was different, I thought, "cool, I want to know how to do that."  I found out that it was very simple.  All you need to do is use one or more of the following seven CSS attributes:


You can change the appearance of the scrollbar for the APPLET, BDO, BODY, DIV, EMBED, OBJECT, and TEXTAREA elements just by putting the CSS attributes into the style attribute of the element, placing them within a STYLE element in the HEAD section of any page, or adding them to an external CSS file.

Note   Some of the above elements only affect a portion of the page, for example the TEXTAREA element, and the appearance of the scrollbars will change only for that element and not the entire page.  To affect the browser window for the entire page, put the settings in the style for the BODY element.

Also, if you want to change the appearance of the scrollbars within an IFRAME element, you would need to put the CSS attributes within the page referenced in the src attribute for the IFRAME element rather than in the page that contains the IFRAME element.  Setting the scrollbar attributes for the IFRAME itself has no effect.

Here's some simple code.  For more information on any of these CSS attributes, see the CSS reference documentation on MSDN.

 scrollbar-3dlight-color: red;
 scrollbar-highlight-color: blue;
 scrollbar-face-color: navy;
 scrollbar-shadow-color: black;
 scrollbar-darkshadow-color: yellow;
 scrollbar-base-color: green;
 scrollbar-arrow-color: aqua;}

Copy and paste this code into the HEAD section of any page, and then open the page in Internet Explorer.  Voila!

The following is an enlarged image of what the scrollbar looks like with these scrollbar settings.  I intentionally specified different colors for each of the CSS attributes in this example to make it easy for you to determine which attribute applies to the different parts of the scroll bar. 

Please don't copy this code wholesale without changing it because this code creates a MUCHO ugly scrollbar, and I don't want to be indirectly responsible for any MUCHO ugly web sites.  However, with a little coordinating of the colors, you can create scrollbars that match the colors in your web site.  Very cool!