CSS: How To Individualize Scrollbars in Webkit Browsers

Internet Explorer is able to do it. Since ages, immemorially, almost. I'm talking about the customization of its scrollbars. Since version 5.5, which was released in July 2000, you can individualize the colors within its scrollbars. Most currently, browsers based on Webkit have caught up with IE 5.5 and allow for even more sophisticated individualization - their possibilities are not limited to simply changing colors. Some Examples For Individual Scrollbars

Color, Width, Borders

There is a variety of pseudo elements for customizing the various components a scrollbar consists of. Just as in every ordinary HTML element you can tweak the background- as well as foreground-color and change the border. Even dotted and rounded scrollbar tracks with or without background graphics are achievable. These pseudo elements are at your disposal:

::-webkit-scrollbar { } /* affects the whole scrollbar */
::-webkit-scrollbar-button { } /* arrow buttons */
::-webkit-scrollbar-track { } /* slider area */
::-webkit-scrollbar-thumb { } /* slider */
::-webkit-scrollbar-corner { } /* sizer (only visible in TEXTAREA) */

Just like you normally would, you can now style the pseudo elements like this:

::-webkit-scrollbar {
  width: 20px;
  background: yellow;
}

::-webkit-scrollbar-thumb {
  border: 2px dotted green;
  border-radius: 10px;
}

In our example we color the whole scrollbar area yellow, defining a width of 20 pixels. The slider gets surrounded by a dotted line in beautiful green. Additionally we round the corners a little. Now, if you want to, you can further customize the bar depending on mouse states while interacting. These pseudo classes do the job:

::-webkit-scrollbar-thumb:hover {
  background: red;
}

::-webkit-scrollbar-thumb:active {
  background: blue;
}

There is only one thing missing. You are not able to use CSS transitions for smooth animation effects. This would be especially elegant if available for changing between the states „hover“ and „active“. Well, do we not need room for future improvements? Other than that, your creativity does not get thwarted. If you are looking for an elegant, worthy design or want to splash the most striking colors, anything is possible.

Additional Pseudo Classes

There is still more. Additional pseudo classes can be used for even heavier customization. I can offer you the class „:inactive-window“, which allows you to design the pseudo elements for inactive windows, while the two classes „:horizontal“ and „:vertical“ care for different designs in - well - horizontal or vertical bars:

::-webkit-scrollbar-thumb:horizontal {
  height: 12px;
}

Conclusion: If you have textareas with multiple rows in your forms, you may want to have the accompanying scrollbars fit the overall design. That is what you can do with these pseudo elements for Webkit browsers. Go for it! (dpe)