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:
- Un-colored Scrollbars (W3C)
- JavaScript and Accessibility. Pt. 1 (WebReference)
- Scrolling and Scrollbars (456 Berea Street)
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:
Post a Comment