Advanced Search

CSS Scrollbar Colors

CSS Tutorial by Björgvin Guðmundsson


Well, you see them on every homepage, standard gray and boring or colorful and matching the site's layout. In fact it's not that hard getting the scrollbars to match your site graphic and color scheme.

Step A: Explanation

I will start by explaining how to apply colors to the scrollbars. (Note: This only works with internet explorer 5.5+ and Netscape 6+).

Here is a picture of a scrollbar explaining what each part is named.

Step B: The source code

What you do is make a style which you add to your page source, between the
and the tags.

After you have done that, you replace the #000000 with the color number of your choise.
(Experiment on different colors and try to make it match your site).

Step C: Hiding the scrollbar when it's not needed

Now, if you want your scrollbar not to be visible until it's really needed, all you have to do is to add a few more words into your style.

Good luck and happy scrollbar editing!
You can find more CSS tutorials at