Styling scrollbars

I’m only going to show you how to style scrollbars because sometimes it helps make a site look better…SOMETIMES. I should tell you right now before you read on any further, styling scrollbars only work on IE, surprisingly enough. I won’t go into it, but there are many other reasons why you shouldn’t spend too much time trying to style scrollbars.

CSS:

html {
scrollbar-base-color: #00CCFF;
scrollbar-arrow-color: #000;
scrollbar-track-color: #CCC;

scrollbar-shadow-color: #000;
scrollbar-darkshadow-color: #333;
scrollbar-lightshadow-color: #CCC;

scrollbar-3dlight-color: #000;
scrollbar-highlight-color: #FFF;
}

Explanation:

scrollbar-base-color is the main color of the scrollbar.
scrollbar-arrow-color is the color of the little arrow, not the box surrounding it.
scrollbar-track-color is the color of the slider’s track.

scrollbar-shadow-color is the general color of the scrollbar’s shadow.
scrollbar-darkshadow-color is the rightmost and bottom side of the scrollbar.
scrollbar-lightshadow-color is the color of 1 pixel in from the darkshadow.

scrollbar-3dlight-color is the color of the leftmost and top side of the scrollbar.
scrollbar-highlight-color is the color of 1 pixel in from the 3dlight.

Now that I’ve showed you what I probably shouldn’t have. There is a way to make custom scrollbars work across all browsers, but it’s in Javascript.

From the makers of the animated dropdown menu that I posted before, they have come up with a very nice way of implementing scrollbars with Javascript. It even replaces the styled scrollbars with the regular browser scrollbars if Javascript happens to be disabled.

But as I’ve said before, you shouldn’t have to spend too long trying to style scrollbars since they aren’t really the main focus of your site.

Enjoy!