Index by Christopher Schmitt

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

Coloring the Scroll Bar in IE

Problem

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

Solution

Use the properties that manipulate scroll bar colors in browsers:

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. 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/#validate_by_uri.

Discussion

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

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

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

In addition to adjusting the scroll bar of the browser viewport, you also can adjust the colors ...

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required