styling your scrollbars with css3

When I first entered into the world of websites styling the browsers scroll bar was quite a common thing one of the designers I worked with would do. On the odd occasion when he built a site he would change the view port scroll bar to match the theme of the website. At the time I was amazed by this, I was still very new to the industry and this seemed great that not only could you style the website but you could possibly change how the browser style is on that page. As time went on and I began to realize that only internet explorer supported this feature and that it really was not something that we needed to do so I abandoned it. Could we do it? yes, but did we need to? definitely not. Just a few days ago I discovered that webkit introduced the capability to style scroll bars back in around 2009. I wasn’t aware of this addition until recently but part of me thinks actually it’s a good thing that i didn’t know. The reason being that no one else is using it or at least i haven’t noticed it on any sites. Which brings me back to my point just because we can do it doesn’t mean we should. At the very least if you are going to do it then i think you should have a good reason to do so. Why? because our browsers, its interface, its widgets and website buttons, links and other interactive features need to be intuitive we need to know that a scrollbar is a scrollbar and that a checkbox is a checkbox they need to be recognizable for the sake of usability. There is nothing wrong with changing these but there should be a good reason to do so and it shouldn’t compromise the users ability to use a website. Here is how you can do it with webkit just don’t bring back the hellish colour schemes from the early internet explorer days for the sake of my eyes. To style the scrollbar in a webkit browser try using these webkit vendor prefixed selectors.

-webkit-scrollbar
-webkit-scrollbar-button
-webkit-scrollbar-track
-webkit-scrollbar-track-piece
-webkit-scrollbar-thumb
-webkit-scrollbar-corner
-webkit-resizer

Heres a simple example of using these on the view port of a page (the main browser scrollbar)

::-webkit-scrollbar {
    	background:#978139;
}
::-webkit-scrollbar-thumb {
    	background:#473a0d;
    	border-top:1px solid #dec470;
    	border-bottom:1px solid #dec470;
}

If you are looking for more variety and different combinations take a look at the webkit tracker for some examples. There are of course javascript implimentations to allow you to style your scrollbars in the browsers that don’t support this. Try taking a look at jScrollPane or some of scrollbar plugins here.