Recipe 4.2. Coloring the Scrollbar

Problem

You want to adjust the color of the scroll bar on a browser's viewport, or the window on the browser.

Solution

Use the properties that manipulate scroll bar 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; }

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 simply skip over the rules. However these rules won't be validated by services such as http://jigsaw.w3.org/css-validator/validator-uri.html.

Discussion

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

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

In addition to adjusting the scrollbar of the browser viewport, you also can adjust the colors of the scroll bar in the textarea for a web form, framesets, iframes, and generally anything with a scroll bar:

.highlight {  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; } <form>  <textarea ></textarea> </form>

When rendering a page that doesn't contain a valid DOCTYPE, Internet Explorer for Windows experiences what is known as quirks (nonstandard behavior) mode and looks for the scrollbar properties in the body selector. When the page contains a valid DOCTYPE, Internet Explorer for Windows is in standards mode and it obeys the html selector. So, just in case the web document's DOCTYPE may change, it's best to ensure that the body and html selectors are grouped and applied in one CSS rule:

html .highlight, body .highlight {  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; }

See Also

The MSDN Scrollbar Color Workshop at http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/scrollbarColor.htm to pick colors for a custom scroll bar.