Scroll Bar Colors

Joe Burns

...use these to jump around or read it all
[The Main Document Scrollbar] [The Textarea Scrollbar] [The Scroll Color Commands]

So. Do you like my scrollbar?

I've found that most users don't like scrollbars all that much. Most would rather click and go from page to page, but scrollbars are part of the Web and differing screen sizes make it nil to impossible to never attain a scroll bar.

I ran across only one of these CSS commands while surfing my University's Web site. The Webmaster had placed them on the homepage to get a nice green scroll. That's one of the school's colors. I liked the effect so, without asking him, I grabbed the code. He reads this site, so I'm going to wait until he writes me a letter calling me a thief.

What's overly cool about these commands is that they work on browsers that understand them, IE 5.5 and above at the moment, yet don't throw errors on those that do not. That's a pretty good deal. You can go ahead and plop these on your page and not worry about any cross-browser concerns.

Furthermore cool regarding these commands is that they not only affect the main browser scroll, but any scroll that appears through form elements or iframe tags.

Moreover cool is that you can affect each scrollbar separately.

Lastly cool is setting the main command to the same color as the background of the page so that the scroll basically disappears except for the little button the user moves up and down.

End of statements involving the word, "cool".

The Main Document Scrollbar

I got the effect on the document's main scrollbar; the one on the far right, using a style block in the HEAD tags of the document. It looks like this:

<STYLE TYPE="text/css">

BODY
{
scrollbar-base-color: orange;
scrollbar-arrow-color: green;
scrollbar-DarkShadow-Color: blue;
}
</STYLE>

Now that you see the code, look to the right and pick out what each element does. You may need to look rather closely to find the effect of the scrollbar-base-color command. Hint: look closely at the border around the arrow and moveable button.

Hey! That was a lousy hint. It basically told you the answer.

The Textarea Scrollbar

Before I get into any further explanation, I wanted to show you a Textarea box with a colorful scrollbar. I made it using inline STYLE attributes. Dig this:

And here's the code:

I changed up the colors a little to show that, as with all CSS commands, the commands closest to the element win. That's why the inline commands in the Textarea box overrode the commands that altered the main scroll on the far right. If I didn't override the main commands the colors would have simply been transferred to the Textarea box. I'll prove that to you now. Here's a Textarea box that doesn't have any inline elements. Note that it looks like the scrollbar on the far right.

The Scrollbar Color Commands

Up above I gave you a couple of examples. You can take the format for using the commands from there also. Here I'd like to simply show you each of the commands and what they do through the use of a Textarea form element. You can use these commands in tandem as you've seen above.

You'll need to go to a new page so that I can isolate the effect from the style sheets commands that already appear on this page.

See the effects here

That's That

Use them all and make some really terrible scrollbars, or use them wisely and you can make a scrollbar that actually compliments the work that you do.

As always, these are Style Sheet commands so be very careful of the capitalization. It matters.

Enjoy!

[The Main Document Scrollbar] [The Textarea Scrollbar] [The Scroll Color Commands]