Languages

Web Style Sheets CSS tips & tricks

See also the index of all tips.

Un-colored scrollbars

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

Some newer browsers (Safari, Chrome) have a different, but equally non-standard way to change the scrollbars.

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–2021 W3C® Privacy policy

Created 12 Oct 2001;
Last updated Wed 06 Jan 2021 05:40:49 AM UTC

Languages

About the translations