Web Style Sheets
CSS tips & tricks

Un-colored scrollbars

Some browsers (IE, Konqueror) have recently started supporting the non-standard properties 'scrollbar-shadow-color', 'scrollbar-track-color' and others. These properties are illegal: they are neither defined in any CSS specification nor are they marked as proprietary (by prefixing them with "-vendor-"). But luckily you can easily disable them.

To make sure the scrollbars of your browser keep their normal colors, you use the user style sheet and the '!important' declaration. The user style sheet can usually be configured via the options/settings menu of the browser. In IE you find it under the "Accessibility" tab, in Konqueror under the "Stylesheets" tab.

1. If you don't have a user style sheet yet, start by creating a new CSS file. You can put it anywhere.
2. Add the following lines to this style sheet file:

   body, html {
     scrollbar-face-color: ThreeDFace !important;
     scrollbar-shadow-color: ThreeDDarkShadow !important;
     scrollbar-highlight-color: ThreeDHighlight !important;
     scrollbar-3dlight-color: ThreeDLightShadow !important;
     scrollbar-darkshadow-color: ThreeDDarkShadow !important;
     scrollbar-track-color: Scrollbar !important;
     scrollbar-arrow-color: ButtonText !important;
   }

3. Enter the path to this file in the corresponding dialog box of your browser.

This should do the trick. You may have to exit and restart the browser to see the effect. To check if it worked, you can look at a small test I made.