CSS Cookbook

2.2. Coloring the Scrollbar

Problem

You want to adjust the color of the scrollbar on a browser’s viewport, or the window on the browser.

Solution

Use the properties that manipulate scrollbar colors in browsers that support it:

body,html {
 scrollbar-face-color: #99ccff;
 scrollbar-shadow-color: #ccccff;
 scrollbar-highlight-color: #ccccff;
 scrollbar-3dlight-color: #99ccff;
 scrollbar-darkshadow-color: #ccccff;
 scrollbar-track-color: #ccccff;
 scrollbar-arrow-color: #000033;
}

Warning

Because these properties aren’t part of the W3C recommendations for CSS, browser vendors don’t have to put in support for these properties. This Solution works only on the KDE Konqueror browser and on Internet Explorer 5.5+ for Windows. Other browsers will skip over the rules as though they weren’t there. These rules won’t be validated by services such as http://jigsaw.w3.org/css-validator/validator-uri.html.

Discussion

Although you might think of a scrollbar as a simple tool, it’s actually composed of several widgets that create a controllable 3D object. Figure 2-4 spotlights the different properties of a scrollbar. As you can see, to create a truly different color scheme for the scrollbar, you must alter the value of seven properties.

Figure 2-4. The parts of a scrollbar that can be affected by proprietary CSS for Internet Explorer for Windows

In addition to adjusting the scrollbar of the browser viewport, you also ...