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.

40 Responses to “Custom scrollbars for IE, Chrome and Firefox using CSS”

Read below or add a comment...

  1. roger says:

    Could u make a sample of firefox version cause whatever i do doesn’t work ?

    Thanks in advance

  2. 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!

  3. 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

  4. Hao says:

    Just tried Firefox solution. I inserted your CSS and nothing changed. Something I missed in the HTML?

  5. 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

  6. ashton says:

    I have been trying your coding for fire fox and it isnt working. Any ideas would be appreciated

  7. Ana Muniz says:

    Amazing article, great! Thanks!

  8. 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.

  9. stecb says:

    Good article.

    p.s. In the chrome section there’s a double }

    ::-webkit-scrollbar-corner { background-color: #999;}}

  10. maxw3st says:

    Thank you for this. I’ll try it on Firefox in Win 7.

  11. Chris Coyier 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?

  12. Pat says:

    Great article, thanks!

  13. Troland says:

    So fancy.Thanks for sharing

  14. Alex says:

    neat stuff, thanks!

  15. Andy Pillip says:

    These only work on desktop browsers, I guess?

  16. 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

  17. 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!

  18. tsering says:

    thanks a lot. it really worked

  19. 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

  20. 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.

  21. 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.

  22. Please remove the one about Firefox, it just doesn’t work.

  23. Aleksandar says:

    Not working in FF and IE.

  24. Dimitris says:

    Does not work (anymore?) for firefox…

  25. supperthin02 says:

    thank you, but “custom scrollbars for Firefox does” not working

  26. Lewy says:

    The code for firefox does not appear to do anything.

  27. parasakthi says:

    this is code not set in firefox ..how to work?

  28. Ismail says:

    Thanks so much for the tuts!! :D

  29. Gargamel says:

    That for Firefox don’t work.

  30. DarkteK says:

    Thx for ur tips, but just to let you know the Custom scrollbars for Firefox doesnt work, how can I do?

  31. Anonymous says:

    How did you make the Firefox code work? I can’t make it work in Firefox, no matter what.

  32. L.J says:

    Doesn’t work.

  33. 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?

  34. 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.

  35. 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.

  36. Shamir Adnan says:

    Custom scrollbars for Firefox is not working? what url-prefix(http://)?

  37. shenbaga says:

    This is working fine in chrome browser. I want to customize the scroll bar width in ie7

  38. 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 Comment...

*