CSS 01 Jul 2016

How to style a scrollbar by using only CSS features and have a cross browser support

For your new web application, you might want to style the scrollbar so that it fits to the general design.

You can either use JavaScript code to achieve the styling or you could stick to CSS properties and pseudo-selectors.

In this article we pick the second variant and our main goal is to have a cross browser support for a styled scrollbar.

For Chrome, Safari and Opera browsers we can use the -webkit-scrollbar CSS selector and its sub selectors. Lets assume that we have a list with the ID #countries which contains a set of countries. The following code has comments about which part of the scrollbar each pseudo-element styles:

    #countries::-webkit-scrollbar {
      /* This selector affects the styling of the complete scrollbar. Example properties: */
        width: 20px;
        border-left: 1px solid #000;
    }

    #countries::-webkit-scrollbar-button {
      /* This selector affects the styling of both the up & down and left & right buttons of a scrollbar */
        height: 10px;
        background-color: #fff;
    }

    #countries::-webkit-scrollbar-track {
      /* This selector affects the styling of the area in the scrollbar between the two buttons */
        background-color: #fff;
    }

    #countries::-webkit-scrollbar-thumb {
      /* This selector affects the styling of draggable element of the scollbar */
        border-radius: 4px;
        background: #ccc url(../thumb.png) no-repeat 50% 50%;
    }

    #countries::-webkit-scrollbar-button:horizontal:increment {
      /* The special selector for the increment (left) button of the horizontal scrollbar. In this case we define a speficic arrow-button as background of this button */
        background: url(../left.png) no-repeat 50% 50%;
    }

    #countries::-webkit-scrollbar-button:horizontal:decrement {
      /* The selector for the decrement (right) button of the horizontal list */
        background: url(../down.png) no-repeat 50% 50%;
    }

    #countries::-webkit-scrollbar-button:vertical:increment {
      /* The special selector for the increment (down) button of the vertical scrollbar. In this case we define a speficic arrow-button as background of this button */
        background: url(../down.png) no-repeat 50% 50%;
    }

    #countries::-webkit-scrollbar-button:vertical:decrement {
      /* The selector for the decrement (up) button of the vertical list */
        background: url(../up.png) no-repeat 50% 50%;
    }

As you saw we can change the design of the scrollbar completely, starting from setting widths or background colors up to changing the icons for the up & down buttons.

The previous selectors are not supported from the Internet Explorer browser. IE supports a non standard set of CSS properties, which work only with this browser. Unfortunately with this properties we can only change the colors of the scrollbar.

    #countries {
      /* Sets the background color of the area in the scrollbar between the two buttons */
      scrollbar-track-color: #fff;

      /* Sets the background color of the draggable element of the scrollbar */
      scrollbar-face-color: #ccc;

      /* Sets the shadow color which is applied around the draggable element */
      scrollbar-shadow-color: #ccc;

      /* Sets the background color of the two buttons (up & down or left & right) */
      scrollbar-arrow-color: #000;
    }

Using the previous code snippets you styled the scrollbar in Crome, Safari, Opera and Internet Explorer. Unfortunately Firefox supports no CSS styling.