Web Style Sheets CSS tips & tricks

See also the index of all tips.

Un-colored scrollbars

Some browsers (IE, Konqueror) support 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.

Bert Bos, style activity lead
Copyright © 1994–2017 W3C®

Created 12 Oct 2001;
Last updated Thu 09 Nov 2017 04:40:59 AM UTC


About the translations