thumbnail

We`re all using web browsers to navigate on internet. Most of you(to be more specific, 65% according to my analytics) are using Chrome and Safari to navigate through this website. These 2 browsers have something in common: they are both built on the WebKit platform, or in other words, they are WebKit browsers. Although Google and Apple assigned them already some quite nice UI elements, some people thought that there is room for more.

Did you know that you can customize the way a scrollbar looks? Let`s say you`ve built a great website but you want to make it awesome. Changing the way the scrollbar looks can be one of the steps for improving a layout.

Customizing scrollbars is easy, being based on a pure CSS solution, but there`s a glitch: custom scrollbars works only for WebKit browsers. But hey, covering more than 60% of the browsers marketplace is certainly a great achievement.
I`ve built a simple example which explains how you can change they way a scrollbar looks but before the code, here are the differences between my regular Chrome scrollbar and the one I`ll present you:

scrollbars How to Customize Browser Scrollbars Using CSS3

Let`s write some code:


::-webkit-scrollbar {
	width: 8px;
}
::-webkit-scrollbar-button {
	width: 8px;
	height:5px;
}
::-webkit-scrollbar-track {
	background:#eee;
	border: thin solid lightgray;
	box-shadow: 0px 0px 3px #dfdfdf inset;
	border-radius:10px;
}
::-webkit-scrollbar-thumb {
	background:#999;
	border: thin solid gray;
	border-radius:10px;
}
::-webkit-scrollbar-thumb:hover {
	background:#7d7d7d;
}			

As you noticed already, each element has the custom prefix ::-webkit-. The elements I stylized are main scrollbar, scrollbar buttons and scrollbar thumb. For the full list of elements and states, visit Chris Coyier`s article related to custom scrollbars. What I did is just a basic example, based only on CSS background colors and some other CSS properties but you can actually modify scrollbars from the bottom by replacing the default images for tray or buttons with some new ones, using of course, CSS and the lovely background attribute.

Written by Madalin Tudose

Madalin Tudose is a web designer and developer who loves to inspect websites for new designing techniques and trends. He`s the founder of Ourtuts, where he blogs about anything related to web development.

  • Suman Pati

    It works Nicely …But can you suggest how would I change the scrolling bar in Firefox & Opera….?

  • http://www.10onten.net Arifin Sarker

    Hay Bro Can U do For All Browser ?

  • http://www.7ooof.net/ BoMazen

    it work only with chrome ??!!

    • http://www.OurTuts.com Madalin Tudose

      Hi! It works only with WebKit browsers, which are Chrome and Safari.