Stupid Web Tricks: Create fabulous tropical scroll bars for IE 5.5

by Guest Contributor | Oct 02, 2003 8:03:00 PM

Takeaway: Add pizzazz to your site's right-hand slider.

Click here for our complete list of Stupid Web Tricks.

By Holly Cunningham
(2/23/01)

OK, "fabulous" may be a bit of an overstatement; this trick doesn't actually dole out Mai Tais in flaming volcano-shaped bowls while wearing a midcut top. But it does let you seize control of the defiantly dull and utilitarian right-hand slider that has so long imposed its pallid-but-necessary self beyond your redeeming powers of design. Microsoft has stepped into the breach and allowed you to plant another flag of freedom in unclaimed territory via simple CSS.

Put this code in the <HEAD> of your page:

<STYLE type="text/css"></STYLE>

Scroll bar color anatomy

For each of these properties, replace color with the color name or hex code that you want to use. To the right is an exaggerated diagram of scroll bar color anatomy. The face property fills the arrow buttons and scroll tab. The highlight and shadow properties color their inner edges, while 3dlight and darkshadow color their outer edges. Use arrow to color the arrow buttons' triangles and track for the rest of the scroll bar. If track isn't specified, highlight also colors the mesh pattern in the track area; otherwise the track is monotone. Finally, base fills in track, face, and 3dlight all at once; setting any of them overrides it.

"OK," you're saying to yourself, "is that all there is to a scroll bar?" That's up to you. You can add script to these styles if subtlety is not your thing. IE 5.5 users will notice that the script we used makes this page's scroll bar change colors. The oddly named TriState Rainbow ScrollBar Script by etLux is another example. Or you can take the quiet approach, such as making the track color blend with the page background for a more seamless look or matching everything out to be invisible--save for the arrows.

But before you put on your "CSS Died for My Sins" T-shirt, be aware that so far only Internet Explorer 5.5 supports these CSS properties, which are unashamedly proprietary. You won't find them even in proposed standards. IE refuseniks out there can add it to the "Life's not fair" litany because those who kowtow to Redmond are getting more service goods right now. Way more. Loyalty has its color-scroll-barred rewards.

Our thanks to Chris Gerow for alerting us to this stupid trick.

Holly Cunningham, a frequent contributor to CNET Builder.com, is a freelance Web designer who works primarily to keep her Chihuahua in furs.

2 comment(s)