Scroll Bars – How to Create a Colored Scroll Bar

Scroll bars always have the same basic gray color. If you wish to change it to a color that matches the colors of your web pages use CSS. By just adding a few lines of code to your web page or style sheet you can display a colored scroll bar.

Here is a web page in which I have added a colored scroll bar:

http://www.ideasofamerica.net

You’ll notice there are different colors for each part of the scroll bar.

Here’s the css code that I used to achieve these colors:


<style type="text/css">
<!--
body{scrollbar-face-color:#FF0000;
scrollbar-track-color:#FFFF00;
scrollbar-arrow-color:#FFFF00;}
-->
</style>

scrollbar-face-color: the red slider and red ends.
scrollbar-track-color: the yellow track of the scroll bar.
scrollbar-arrow-color: the yellow arrows at each end.

The one-colored scroll bar

If you only want to use one different color for your scroll bar besides gray, then use the scrollbar-base-color attribute


<style type="text/css">

body {scrollbar-base-color:#369;}

</style>

This will color it blue.

Points to consider when using colored scroll bars:

1. Colored scroll bars need to be viewed in Internet Explorer 5.5 or 6.
They are created with proprietary CSS rules developed by Microsoft.

When viewing it in other browsers you may only see the default browser color.
ie It won’t appear in the Firefox browser.

2. The scroll bar css does not function in any form of xhtml. Remove the XHTML DOC TYPE from the top of your document and it will work, although this may alter the alignment of your web page (I had to re-center the page after removing the XHTMl doc type).

3. Consider not using them as they are not standards based. If you validate your CSS markup through W3C’s CSS Validator, you will get an error message that the property doesn’t exist. This is because it’s not supported by W3C recommendations.

4. They used to be popular in the 90s but now they are not used much.

5. Make sure the colors you choose aren’t a problem for those with color deficiencies or vision impairments. All colors can’t be seen by everyone.

Resources

http://websitetips.com/articles/css/scrollbars/

Scroll bar generator

Comments

  1. copy/paste the following code into the HEAD section of your Xhtml page/change colors to your preference. Do NOT change your DOCTYPE. VOILA! It works for me, and “This document was successfully checked as XHTML 1.0 Transitional!” with validator.w3.org.
    URL provided shows result.
    —–

    /*<![CDATA[*/

    /*]]>*/

  2. Greetings from Georgia! Just googled your posts. Actually visited your article, I’ll email it along! B) Have a good day!

Speak Your Mind

*