CSS Scrollbar - color scrollbar using cascading Style Sheets

Colors can be added to the otherwise "dry" web page scrollbar using CSS (Cascading Style Sheets). The colored scrollbars are visible in Internet Explorer (version 5.5+); other popular web browsers like Firefox, Opera and Netscape do not display colored scrollbars because they ignore the scrollbar CSS code. So you do need Internet Explorer 5.5 or higher to see the scrollbar colors and take full advantage of this tutorial.

Basic CSS property for a scrollbar - adding a base color

A quick way to color a scrollbar is to attach a base color to it. This is done using the scrollbar-base-color style sheet property which looks like:

{scrollbar-base-color: [color name]/[color value]}

Here is a page with an orange colored scrollbar - opens in a new window. The code used for this orange color is #FF9900 - .

You will notice that the arrows are black in color and the css scrollbar has a 3D kind of appearance.

Let us now have a look at a dark blue colored scrollbar - Click to display a web page that shows scrollbars using the css scroll-base-color property set to #003366 - .

The arrows are in black color and barely visible. We will soon see how we can work around this problem but before that let me detail how you can add the CSS code to a web page to color the scrollbar.

Adding CSS code on web pages to color scrollbars

There are two ways to attach this Cascading Style Sheets code to a web page - Embedding or Including/Importing an external .css file.

The scroll-base-color property is added to the html css selector. The style sheet rule looks like:

html {scrollbar-base-color: color name or color value}

This style is added to a web page either as an embedded style sheet or as an external style sheet (.css) file that is included on a web page using the HTML tag or @import. If you haven't used style sheets ever, no need to worry... details are below.

Embedding CSS scrollbar rule on a web page

Style sheet rules can be embedded inside each web page in the section enclosed within the tags. So to create an orange colored scrollbar for a web page you use the following code:

Your web page content

The style sheet rule is embedded in the HTML

Posted in: web developers notes