Custom CSS Scrollbar for Firefox

Dimitri Vorontzov picture Dimitri Vorontzov · May 29, 2011 · Viewed 492.7k times · Source

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.

Would be grateful for somebody's expert advice!

Answer

thirtydot picture thirtydot · May 29, 2011

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.