Coloring Scrollbars using CSS properties and rules

The scrollbar-base-color is the most basic style sheet property that one can apply to a scrollbar. This property takes a color name or color code as value and displays the scrollbar in that shade. However, if you set the value for this property to a dark color, the scroll arrows might not be visible because they are displayed in black.

As promised in the CSS Scrollbar color code article, let me tell you how you can change the color of the scroll arrows.

The color of the scroll arrows are controlled by scrollbar-arrow-color CSS property. This property can be included in a style selector like html or can be a part of a rule that you have named. Here is a style that will set the web page scrollbar to a deep orange color and the scroll bar arrow color to white.

html {scrollbar-base-color: #FF6600; scrollbar-arrow-color: #FFFFFF;}

To check the results - click here.

Now you have learnt one more style sheet property for coloring scrollbars.
Instead of going through each property individually, let me show you a nice looking blue scrollbar. The blue colored scroll bar on this web page (opens in a new window) employs several scrollbar style properties. You will notice that the scrollbar track color is a pale yellow. This would not have been possible by using only the scrollbar-base-color style property... there is something else going on here and let us delve deeper into it.

Here is an example of a rather gaudy scrollbar (open in a new browser window).
An image of the gaudy scrollbar is below and the colors used in it are red (#FF0000), blue (#0000FF), green (#00FF00), yellow (#FFFF00), pink (#FF00FF), cyan (#00FFFF) and black (#000000).

Note: The numbers prefixed with the hash (# sign) that you find in parenthesis after color names are hexadecimal codes of those colors. If you want to know more about hexadecimal color codes, refer Colors in HTML - web page color codes and names. Some related articles that can help you understand colors on the web: Websafe colors, Web safe colors list, Detailed list of HTML color names and List of html colour names

As depicted in the image above, a scrollbar can be take in color at different places:

• Scroll bar track color
• Scroll bar slider color
• Scroll bar arrow color (which we have already learnt)
• Scroll bar 3D light color
• Scroll bar highlight color
• Scroll bar shadow color
• Scroll bar dark shadow color

You can set colors for all these on a scrollbar using styles. And here are the CSS properties that govern these colors:

• scrollbar-track-color: Sets the color for scroll bar track
• scrollbar-face-color: Sets the color for the scroll bar slider and the boxes that contain the scrollbar arrows
• scrollbar-arrow-color: Sets the scroll bar arrow color
• scrollbar-3dlight-color: Sets the scroll bar 3D light color
• scrollbar-highlight-color: Sets the scroll bar highlight color
• scrollbar-shadow-color: Sets the scroll bar shadow color
• scrollbar-darkshadow-color: Sets the scroll bar dark shadow color

In the gaudy scrollbar, above, the values for these different properties have, thus, been defined in the CSS html selector as shown below:

html {scrollbar-face-color: #FF0000;
scrollbar-shadow-color: #0000FF;
scrollbar-highlight-color: #00FF00;
scrollbar-3dlight-color: #FF00FF;
scrollbar-darkshadow-color: #00FFFF;
scrollbar-track-color: #FFFF00;
scrollbar-arrow-color: #000000;}

Do the scrollbar CSS properties conform to the W3C style sheets rules - Checking CSS validity?

The scrollbar CSS properties are NOT W3C valid.
W3C is an organization that lays down the standards for HTML and CSS. Companies that develop web browsers should, ideally, adhere to these standards but unfortunately each company tries to better the competition by including certain HTML tags and CSS properties that are specific to its browser. The scrollbar cascading style sheet rules are a typical example of browser specific CSS properties; they work very well under Internet Explorer but fail under the present version of FireFox.
For your information, the W3C CSS validator can be found at http://jigsaw.w3.org/css-validator/.
So if you are one of those meticulous types who like to follow rules, it would be better that you do not use the css scrollbar properties. By the by, W3C HTML and CSS validation has been discussed a lot on several blogs and online forums. The two main questions being (a). Should we take the additional effort to validate all our web pages; i.e. is W3C HTML and CSS validation of any value? and (b). Do web pages with valid HTML and CSS rank higher on search engines?
If you want to dig deeper and know the answers to these questions, I suggest you read these discussion threads and blogs.

1 | 2 | 3 | 4 | 5 | 6