Colored Scrollbars

If you're reading this tutorial, you've probably already seen sites that have colored scrollbars instead of the drab gray ones. Colored scrollbars became possible with the release of Internet Explorer version 5.5. If you don't know if your browser can display colored scrollbars, just look at the scrollbar on this site. If it's the standard gray, your browser can't do it because this site has a brown and black scrollbar.

Changing the scrollbar color is done with cascading style sheet code, and it's so easy you won't believe it. Just add:

<style type="text/css">
body {scrollbar-face-color:#FEBB00; 
          scrollbar-arrow-color:#FF0000;
          scrollbar-track-color: #000000;}
</style>

...to the HEAD section of your HTML page. Change the colors to fit your site and you're in business. If you are already using a CSS body reference in your HEAD section, don't add a new body reference - just add the scrollbar items to the one you already have. Neat, eh Pete?

The items shown above are the most popular items to change, but there are are four other items you can change the color settings for as well. You can use as many or as few as you like, anything not named will use the default browser setting. If you want to set the color for all seven items, be sure you list them in the order shown below:

scrollbar-face-color: #423626;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #000000; 
scrollbar-arrow-color: #A7C2B1;
scrollbar-track-color: #000000;

And that concludes this. . .how about that! :)

PS - The members-only site features an online colored scrollbar code generator. Learn more about member benefits.

Web Design

Site Information

More Boogie Jack Sites

Colored Scrollbars