Scrollbar Colors

Creating a User Style Sheet

Some browsers such as Internet Explorer, Konqueror, etc. have begun supporting the illegal properties that change the scrollbar colors. If you want to make sure that your browser keeps the normal colors, it is possible in the face of style sheets. To do this, you have to create a user style sheet with the "important" declaration. Here's how you can try it:

  1. If you don't already have a user style sheet, open a blank CSS file. You can place it anywhere on your hard drive, but I would recommend placing it in your IE or Konqueror program folders, so you remember what it is.

  2. Call the style sheet
    userstylesheet.css

  3. Add the following lines to the style sheet:
    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;
    }

  4. Add the path to the style sheet to your browser:
    Internet Explorer:
    Go to the Internet Options button in the Tools menu. Click on the Accessibility button, and check the box titled "Format documents using my style sheet". Then browse to the style sheet you created.
    Konqueror:
    Go to the settings menu and choose the Stylesheets tab. Then browse to the style sheet you created to use as your user style sheet.

  5. Restart your browser and it should stay with the default colors.

If you have decided that you don't need to write valid XHTML or CSS, & you really want to change the colors of the scrollbar for your Internet Explorer and conqueror customers. The seven CSS properties you can use to do this are as follows:

These style properties can be used for more than just the scrollbar on the right side of the browser window. You can color the scrollbars in a textarea box, or even in a frameset. You just need to put your properties in a class and set that class on the element you want changed.