Tuesday, May 15, 2007

Coloring Your Scrollbars with CSS

It’s true! You really can color your scrollbars and have a change of scenery from the basic gray or other browser default. It just takes a few snippets of CSS markup, which you’ll learn how to do in this tutorial.

Note: To see the results, you’ll need to view your page with Internet Explorer 5.5+, too. (Most other browsers use the browser default and do NOT support scrollbar colors - see the Further Information section below.)

You can also color the scrollbar of a form’s textarea field, as shown below. I used a variety of bright colors to show some of the scrollbar property attribute colors that are possible to change.

If you don’t see a colorful scrollbar above, here are some screen shots. (A separate popup window will open.)

Editor note Feburary 2006: Note that not everyone considers colored scrollbars a good thing, and you should also be sure the colors you choose aren’t a problem for those with color deficiencies or vision impairments. Before altering scrollbar colors, make sure they won’t be a problem to use by anyone and that they will be well received by your visitors! See the following:

This tutorial is geared for those with a knowledge of basic HTML markup, including forms, and a beginning to intermediate level knowledge of CSS.

No comments:

Anton Subagja