Custom CSS Scrollbar for Firefox

Question

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 1

2018 Firefox scrollbars still looks as bad as 1992, it's a PITA, but we can now use css filters on them.

Here is an example with a greenish cross browser compatible hommous tint on top.

Use wisely.

div {
  max-height: 200px;
  max-width: 80%;
  overflow-x: hidden;
  overflow-y: scroll;

  filter: sepia(100%) saturate(360%) grayscale(0) contrast(140%) hue-rotate(56deg) invert(16%)

}

<div>

<ul>
<li><a href="/wiki/Chapati" title="Chapati">Chapati</a>, unleavened flatbread from the <a href="/wiki/Indian_subcontinent" title="Indian subcontinent">Indian subcontinent</a></li>
<li><a href="/wiki/Wheat_tortilla" title="Wheat tortilla">Flour tortilla</a>, a thin unleavened flatbread from <a href="/wiki/Mexico" title="Mexico">Mexico</a></li>
<li><a href="/wiki/Focaccia" title="Focaccia">Focaccia</a>, a flat oven-baked bread from <a href="/wiki/Italy" title="Italy">Italy</a></li>
<li><a href="/wiki/Injera" title="Injera">Injera</a>, a sourdough-risen flatbread from <a href="/wiki/East_Africa" title="East Africa">East Africa</a></li>
<li><a href="/wiki/Khachapuri" title="Khachapuri">Khachapuri</a>, a breaded cheese dish from <a href="/wiki/Georgia_(country)" title="Georgia (country)">Georgia</a></li>
<li><a href="/wiki/Khubz" title="Khubz">Khubz</a>, a round bread from the <a href="/wiki/Arabian_Peninsula" title="Arabian Peninsula">Arabian Peninsula</a></li>
<li><a href="/wiki/Matnakash" title="Matnakash">Matnakash</a>, a leavened bread from <a href="/wiki/Armenia" title="Armenia">Armenia</a> (related to the <a href="/wiki/Ramadan_pita" class="mw-redirect" title="Ramadan pita">Ramadan pita</a>)</li>
<li><a href="/wiki/Naan" title="Naan">Naan</a>, a leavened, oven-baked flatbread from <a href="/wiki/Central_Asian_cuisine" class="mw-redirect" title="Central Asian cuisine">Central</a> and <a href="/wiki/South_Asian_cuisine" title="South Asian cuisine">South Asia</a></li>
<li><a href="/wiki/Pit%C4%83_de_Pecica" title="Pită de Pecica">Pită de Pecica</a>, a round bread from <a href="/wiki/Romania" title="Romania">Romania</a></li>
<li><a href="/wiki/Rghaif" class="mw-redirect" title="Rghaif">Rghaif</a>, a pancake-like bread from <a href="/wiki/Maghreb" title="Maghreb">Northwest Africa</a></li>
</ul>

</div>