By Holly Cunningham
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:
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
shadow properties color their inner edges, while
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
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.
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.