Search code examples
cssfirefoxwebkitscrollbar

Custom CSS Scrollbar for Firefox

I want to customize a scrollbar with CSS.

I use this WebKit CSS code, which works well for Safari and Chrome:

::-webkit-scrollbar {
  width: 15px;
  height: 15px;
}

::-webkit-scrollbar-track-piece {
  background-color: #c2d2e4;
}

::-webkit-scrollbar-thumb:vertical {
  height: 30px;
  background-color: #0a4c95;
}

How can I do the same thing in Firefox?

I know I can easily do it using jQuery, but I would prefer to do it with pure CSS if it's doable.

Solution

  • As of late 2018, there is now limited customization available in Firefox!

    See these answers:

    And this for background info: https://bugzilla.mozilla.org/show_bug.cgi?id=1460109

    There's no Firefox equivalent to ::-webkit-scrollbar and friends.

    You'll have to stick with JavaScript.

    Plenty of people would like this feature, see: https://bugzilla.mozilla.org/show_bug.cgi?id=77790

    As far as JavaScript replacements go, you can try: