Custom scrollbars for IE, Chrome and Firefox using CSS

Using Custom scrollbars in your website can be really eye-catching and they go well with the website’s design. For web designers, it’s difficult creating them with JavaScript. Instead, you can create custom scrollbars using CSS. According to my acknowledge, it only worked in Internet Explorer. During my recent project, my client required the scrollbar to be stylized with CSS, and make it work in most mainstream browsers. So after a bit of googling, I found the tricks to do so and share them with you here.

Custom scrollbars for Internet Explorer

body{
  scrollbar-base-color: #C0C0C0;
  scrollbar-base-color: #C0C0C0;
  scrollbar-3dlight-color: #C0C0C0;
  scrollbar-highlight-color: #C0C0C0;
  scrollbar-track-color: #EBEBEB;
  scrollbar-arrow-color: black;
  scrollbar-shadow-color: #C0C0C0;
  scrollbar-dark-shadow-color: #C0C0C0;
}

In case you don’t know what these attributes mean, here is the scrollbar map that will help you understand.

custom scrollbars map for Internet Explorer

custom scrollbar map for Internet Explorer

Use the above code for the tags you want to stylize, or use it in body, to stylize all scrollbars in the document. If you’re lazy enough to customize by yourself, there are some code generator you can use, this Custom Scrollbars Generator is nice.

Custom scrollbars for Chrome

::-webkit-scrollbar { width: 3px; height: 3px;}
::-webkit-scrollbar-button {  background-color: #666; }
::-webkit-scrollbar-track {  background-color: #999;}
::-webkit-scrollbar-track-piece { background-color: #ffffff;}
::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 3px;}
::-webkit-scrollbar-corner { background-color: #999;}}
::-webkit-resizer { background-color: #666;}

There’s also a scrollbar pieces map for you:

custom scrollbar map for Chrome

custom scrollbar map for Chrome

Obviously, Chrome and webkit based browsers can do more custom work than IE, not just colors, you can apply radius, transparency on scrollbars, that’s way more flexible than IE.

Custom scrollbars for Firefox Updated: Doesn’t work any more.

@-moz-document url-prefix(http://),url-prefix(https://) {
scrollbar {
   -moz-appearance: none !important;
   background: rgb(0,255,0) !important;
}
thumb,scrollbarbutton {
   -moz-appearance: none !important;
   background-color: rgb(0,0,255) !important;
}

thumb:hover,scrollbarbutton:hover {
   -moz-appearance: none !important;
   background-color: rgb(255,0,0) !important;
}

scrollbarbutton {
   display: none !important;
}

scrollbar[orient="vertical"] {
  min-width: 15px !important;
}
}

The CSS code above for Firefox is a little different. But it can generate same custom scrollbars like Chrome do. And by using orient=”vertical” you can apply different styles for verticle and horzontal scrollbars, sounds like fun.

Though the css way of customization is simple, it does look a bit rough. Alternatively, you can use javascript-based scrollbars which give you more custom options. Remeber, it’s not necessary to change your website scrollbars, you should keep the design simple, not too fancy.

Comments

  1. Tarulia says

    Hey,
    I know this post is a few months old already, but I just stumbled across it and I was wonderin if the Firefox version also works on single elements.

    For Webkit based browsers we have his:

    #element::-webkit-scrollbar {
    /*do whatever you want*/
    }

    But is there an equivalent for Gecko based browsers? In your example it looks like it only applys globally on a page.

    Anything I could find on google only told me it’s not possible at all and this seems to be the only post saying it is indeed possible, but also on element-base?

    Nice post anyway,
    Cheers!

  2. Rishabh says

    Hi,
    How can I use Custom scrollbars for Firefox ? I have no. of scroll bars in my different pages.
    but, How can I use it ? Can you give simple example and why do we use
    @-moz-document url-prefix(http://),url-prefix(https://)
    url-prefix ???

    Thanks

  3. Michael says

    Where does one insert the CUSTOM SCROLLBARS FOR CHROME code?

    Tried to insert it with CSS into header; didn’t work.
    Tried it as SCRIPT in header; didn’t work.

    Must have format incorrect.

    Thanks,
    Michael

  4. Hartley says

    Hi, I can’t get your firefox code to work, I’m just trying to modify one vertical scroll bar inside a div tag so that it is transparent or just darker, the default scroll bar looks horrible. Where am I supposed to paste that code? I tried it in the body tag, within the div tag, just on its own… Firefox doesn’t seem to care though the scroll bar remains unchanged.

  5. says

    Just to add a little information here about support…

    IE even up to 11 is still supporting at least some of those scrollbar styling properties. Might be worth doing some testing of each version and seeing which supports what.

    That WebKit graphic is taken from my site if you feel like linking it up: http://css-tricks.com/custom-scrollbars-in-webkit/

    And I don’t know what’s up with that Firefox example. I’ve never seen it before and doesn’t seem to work for me in current Firefox (v24 as I write). Did it used to work? What versions?

  6. John says

    Hi,

    Thank you very much for this tutorial. I just needed it for design purposes.
    However, I couldn’t get the Firefox method to work properly.
    I’m not sure what I did wrong.

    Kind regards,
    John

  7. Tx3 says

    This article was helpful. Our user-interface designer wanted little bit different colours to the scrollbars and with these instructions it was possible. Thanks!

  8. sachin says

    not working for firefox. i used css for ff but its not working. ie css not changing default scrollbar only changing user css scrollbar. can u give me solution for above points? finally nice post…great help

  9. raju says

    hello sir,

    i m making a website in ie10, the scrollbars which are being appeared are ie10 default but i want them
    to be like ie7 or ie8.
    Is there any way to change them using css aur javascript.If this could be done using css then it will be nice and easy as well.

  10. says

    Nice summary.

    Also, it’s much better than JS scrollbars, because JavaScript can stutter and glitch, whereas CSS usually doesn’t, mostly because it’s not code running in a sandbox, but interpreted as part of the page rendering.

  11. ooo says

    Thank you for that page!
    The version for firefox does not work for me. Do you know about any change in Firefox about this?

  12. Hardik says

    This is very nice and helpful article.

    I tried all three, IE and Chrome worked fine but couldn’t get FF to work. I saw many online posts where they say FF doesn’t support it and I tend to believe it as I saw on Mozilla forums. You code also make me believe that it’s possible. Am I missing something?

    Please help for FF, more detail on where to put your code will be helpful. Thanks.

  13. Val says

    “Remeber, it’s not necessary to change your website scrollbars, you should keep the design simple, not too fancy.”

    People usually need to change scrollbars in lists etc.

  14. mm says

    and firefox wonders why people are more and more using Chrome…

    they seems to do their own thing and dont care a dam thing about standards

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>