Define Page Scrollbar Styles

By Ades Tynyshev
2005-05-31

Define Page Scrollbar Styles

Well it does not look that good, but that is just for the differentiation of the areas of the scrollbar. Once you know which area is defined with which code you can modify it as you like. Actually the code is quite self explanatory. Anyway let's have a look.

BODY
{
scrollbar-face-color: green;
scrollbar-shadow-color: blue;
scrollbar-highlight-color: black;
scrollbar-3dlight-color: red;
scrollbar-darkshadow-color: brown;
scrollbar-track-color: yellow;
scrollbar-arrow-color: white;
}
</STYLE>

To change the style of the page scrollbar you need to insert the above code between your <head></head> tages in the page. Color names such as green, blue...etc can be replaced with the hexa decimal codes such as #000000.

The following image shows which codes define which part of the scrollbar. I guess it does not need further explanation, since everything is clear already. Go ahead and make your page look nicer.

This is what I have used for my pages, feel free to use it if you want.

BODY
{
scrollbar-face-color: #EAEAEA;
scrollbar-shadow-color: #EAEAEA;
scrollbar-highlight-color: #EAEAEA;
scrollbar-3dlight-color: #EAEAEA;
scrollbar-darkshadow-color: #697074;
scrollbar-track-color: #F7F7F7;
scrollbar-arrow-color: #666666;
}
</STYLE>

Don't see the effect? If you have a doctype specified at the top of your page then you might want to remove it. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <---- REMOVE RED LINE FROM YOUR SOURCE CODE.

Tutorial Pages:
» Define Page Scrollbar Styles

| Write For Us

Related Tutorials:
» Planning Your Stylesheet - The Definitive Guide
» CSS Shorthand Properties
» Print Stylesheet - The Definitive Guide
» Using CSS Selectors to Highlight Unedited Form Fields
» An Introduction to CSS
» Overlapping tabbed navigation in CSS