How to Customize Browser Scrollbars Using CSS3

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:

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.

[Total: 1    Average: 5/5]

Madalin Tudose

I`m a web developer. I build HTML Templates and WordPress Themes which are eventually released on ThemeForest under the DeliciousThemes brand.

Join the discussion

  1. BoMazen on October 31, 2012 at 5:25 pm Reply

    it work only with chrome ??!!

    1. Madalin Tudose on November 1, 2012 at 3:14 pm Reply

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

      1. ysbinang on May 17, 2014 at 1:28 am Reply

        yeah,there are many windows busicd on chrome like the word, 360 and so on

  2. Arifin Sarker on January 8, 2013 at 4:22 am Reply

    Hay Bro Can U do For All Browser ?

  3. Suman Pati on February 27, 2013 at 9:31 pm Reply

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

  4. Makou AJ on January 1, 2015 at 10:53 am Reply

    It does not work for my blog. (My blog is on a game). Animaljamdigs.blogspot.com/
    It doesn’t work at all :((((

Leave a Comment

Your email address will not be published. Marked fields are required.