Custom CSS Scrollbar for Firefox

Css Problem Overview

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.

Css Solutions

Solution 1 - Css

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:

Solution 2 - Css

Firefox 64 adds support for the spec draft CSS Scrollbars Module Level 1, which adds two new properties of scrollbar-width and scrollbar-color which give some control over how scrollbars are displayed.

You can set scrollbar-color to one of the following values (descriptions from MDN):

auto Default platform rendering for the track portion of the scrollbar, in the absence of any other related scrollbar color properties.
<color> <color> Applies the first color to the scrollbar thumb, the second to the scrollbar track.

Previously the spec included dark and light values what were not implemented in Firefox. These values have since been removed from the spec.

Additionally in macOS Firefox version prior to 99.0, the auto-hiding semi-transparent scrollbars that are the macOS default could not be styled by these rules. As of Firefox 99.0 all macOS scrollbar modes (configured under System Preferences > Show Scroll Bars) can be colored.

Visual Demo:

.scroll {
  width: 20%;
  height: 100px;
  border: 1px solid grey;
  overflow: scroll;
  display: inline-block;
}
.scroll-color-auto {
  scrollbar-color: auto;
}
.scroll-color-dark {
  scrollbar-color: dark;
}
.scroll-color-light {
  scrollbar-color: light;
}
.scroll-color-colors {
  scrollbar-color: orange lightyellow;
}

<div class="scroll scroll-color-auto">
<p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
</div>

<div class="scroll scroll-color-dark">
<p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p>
</div>

<div class="scroll scroll-color-light">
<p>light</p><p>light</p><p>light</p><p>light</p><p>light</p><p>light</p>
</div>

<div class="scroll scroll-color-colors">
<p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p>
</div>

You can set scrollbar-width to one of the following values (descriptions from MDN):

auto The default scrollbar width for the platform.
thin A thin scrollbar width variant on platforms that provide that option, or a thinner scrollbar than the default platform scrollbar width.
none No scrollbar shown, however the element will still be scrollable.

You can also set a specific length value, according to the spec. Both thin and a specific length may not do anything on all platforms, and what exactly it does is platform-specific. In particular, Firefox doesn't appear to be currently support a specific length value (this comment on their bug tracker seems to confirm this). The thin keywork does appear to be well-supported however, with macOS and Windows support at-least.

It's probably worth noting that the length value option and the entire scrollbar-width property are being considered for removal in a future draft, and if that happens this particular property may be removed from Firefox in a future version.

Visual Demo:

.scroll {
  width: 30%;
  height: 100px;
  border: 1px solid grey;
  overflow: scroll;
  display: inline-block;
}
.scroll-width-auto {
  scrollbar-width: auto;
}
.scroll-width-thin {
  scrollbar-width: thin;
}
.scroll-width-none {
  scrollbar-width: none;
}

<div class="scroll scroll-width-auto">
<p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
</div>

<div class="scroll scroll-width-thin">
<p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p>
</div>

<div class="scroll scroll-width-none">
<p>none</p><p>none</p><p>none</p><p>none</p><p>none</p><p>none</p>
</div>

Solution 3 - Css

Since Firefox 64, is possible to use new specs for a simple Scrollbar styling (not as complete as in Chrome with vendor prefixes).

In this example is possible to see a solution that combine different rules to address both Firefox and Chrome with a similar (not equal) final result (example use your original Chrome rules):

The key rules are:

For Firefox

.scroller {
  overflow-y: scroll;
  scrollbar-color: #0A4C95 #C2D2E4;
}

For Chrome

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

.scroller::-webkit-scrollbar-track-piece  {
    background-color: #C2D2E4;
}

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

Please note that respect to your solution, is possible to use also simpler Chrome rules as the following:

.scroller::-webkit-scrollbar-track  {
    background-color: #C2D2E4;
}

.scroller::-webkit-scrollbar-thumb {
    height: 30px;
    background-color: #0A4C95;
}

Finally, in order to hide arrows in scrollbars also in Firefox, currently is necessary to set it as "thin" with the following rule scrollbar-width: thin;

Solution 4 - Css

May I offer an alternative?

No scripting whatsoever, only standardized css styles and a little bit of creativity. Short answer - masking parts of the existing browser scrollbar, which means you retain all of it's functionality.

.scroll_content {
    position: relative;
    width: 400px;
    height: 414px;
    top: -17px;
    padding: 20px 10px 20px 10px;
    overflow-y: auto;
}

For demo and a little bit more in-depth explanation, check here...

jsfiddle.net/aj7bxtjz/1/

Solution 5 - Css

I thought I would share my findings in case someone is considering a jQuery plugin to do the job.

I gave jQuery Custom Scrollbar a go. It's pretty fancy and does some smooth scrolling (with scrolling inertia) and has loads of parameters you can tweak, but it ended up being a bit too CPU intensive for me (and it adds a fair amount to the DOM).

Now I'm giving Perfect Scrollbar a go. It's simple and lightweight (6 KB) and it's doing a decent job so far. It's not CPU intensive at all (as far as I can tell) and adds very little to your DOM. It's only got a couple of parameters to tweak (wheelSpeed and wheelPropagation), but it's all I need and it handles updates to the scrolling content nicely (such as loading images).

P.S. I did have a quick look at JScrollPane, but @simone is right, it's a bit dated now and a PITA.

Solution 6 - Css

Year 2020 this works

/* Thin Scrollbar */
:root{
  scrollbar-color: rgb(210,210,210) rgb(46,54,69) !important;
  scrollbar-width: thin !important;
}

https://github.com/Aris-t2/CustomCSSforFx/issues/160

Solution 7 - Css

As of now, 2021, there are just two properties for Firefox scrollbar customization available; scrollbar-color and scrollbar width.

scrollbar-color: red yellow; /* track thumb */
scrollbar-width: 5px; /* none, thin, or auto */

.demo {
  overflow-y: scroll;
}

.demo {
  scrollbar-color: red yellow;
  scrollbar-width: 10px;
}

<div class="demo">
  <p>
    some scroll text...<br><br> don't you dare scroll to the bottom...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some
    scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> still here? fair warning, do
    NOT scroll farther down!<br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> STOP!
    <br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> NOW I'M MAD<br><br> some
    scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> AND THAT IS GENERALLY A BAD IDEA<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> bye
    <br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    last last last warning; you will not like what is at the bottom<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll
    text...<br><br> some scroll text...<br><br> thare is nothing at the bottom!<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br>    some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> some scroll text...<br><br> NOTHING >:D
  </p>
</div>

HTML

<div class="demo">

CSS

.demo {
    overflow-y: scroll;
}

.demo {
    scrollbar-color: red yellow;
    scrollbar-width: 5px;
}

Solution 8 - Css

Here I have tried this CSS for all major browser & tested: Custom color are working fine on scrollbar.

Yes, there are limitations on several versions of different browsers.

/* Only Chrome */
html::-webkit-scrollbar {width: 17px;}
html::-webkit-scrollbar-thumb {background-color: #0064a7; background-clip: padding-box; border: 1px solid #8ea5b5;}
html::-webkit-scrollbar-track {background-color: #8ea5b5; }
::-webkit-scrollbar-button {background-color: #8ea5b5;}
/* Only IE */
html {scrollbar-face-color: #0064a7; scrollbar-shadow-color: #8ea5b5; scrollbar-highlight-color: #8ea5b5;}
/* Only FireFox */
html {scrollbar-color: #0064a7 #8ea5b5;}
/* View Scrollbar */
html {overflow-y: scroll;overflow-x: hidden;}

<!doctype html>
<html lang="en" class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
	<header>
		<div id="logo"><img src="/logo.png">HTML5&nbsp;Layout</div>
		<nav>  
			<ul>
				<li><a href="/">Home</a>
				<li><a href="https://html-css-js.com/">HTML</a>
				<li><a href="https://html-css-js.com/css/code/">CSS</a>
				<li><a href="https://htmlcheatsheet.com/js/">JS</a>
			</ul>
		</nav>
	</header>
	<section>
		<strong>Demonstration of a simple page layout using HTML5 tags: header, nav, section, main, article, aside, footer, address.</strong>
	</section>
	<section id="pageContent">
		<main role="main">
			<article>
				<h2>Stet facilis ius te</h2>
				<p>Lorem ipsum dolor sit amet, nonumes voluptatum mel ea, cu case ceteros cum. Novum commodo malorum vix ut. Dolores consequuntur in ius, sale electram dissentiunt quo te. Cu duo omnes invidunt, eos eu mucius fabellas. Stet facilis ius te, quando voluptatibus eos in. Ad vix mundi alterum, integre urbanitas intellegam vix in.</p>
			</article>
			<article>
				<h2>Illud mollis moderatius</h2>
				<p>Eum facete intellegat ei, ut mazim melius usu. Has elit simul primis ne, regione minimum id cum. Sea deleniti dissentiet ea. Illud mollis moderatius ut per, at qui ubique populo. Eum ad cibo legimus, vim ei quidam fastidii.</p>
			</article>
			<article>
				<h2>Ex ignota epicurei quo</h2>
				<p>Quo debet vivendo ex. Qui ut admodum senserit partiendo. Id adipiscing disputando eam, sea id magna pertinax concludaturque. Ex ignota epicurei quo, his ex doctus delenit fabellas, erat timeam cotidieque sit in. Vel eu soleat voluptatibus, cum cu exerci mediocritatem. Malis legere at per, has brute putant animal et, in consul utamur usu.</p>
			</article>
			<article>
				<h2>His at autem inani volutpat</h2>
				<p>Te has amet modo perfecto, te eum mucius conclusionemque, mel te erat deterruisset. Duo ceteros phaedrum id, ornatus postulant in sea. His at autem inani volutpat. Tollit possit in pri, platonem persecuti ad vix, vel nisl albucius gloriatur no.</p>
			</article>
		</main>
		<aside>
			<div>Sidebar 1</div>
			<div>Sidebar 2</div>
			<div>Sidebar 3</div>
		</aside>
	</section>
	<footer>
		<p>&copy; You can copy, edit and publish this template but please leave a link to our website | <a href="https://html5-templates.com/" target="_blank" rel="nofollow">HTML5 Templates</a></p>
		<address>
			Contact: <a href="mailto:[email protected]">Mail me</a>
		</address>
	</footer>


</body>

</html>

Solution 9 - Css

Year 2022

Tested with the latest Firefox and Chrome versions

The following snippet will display the same scrollbar styles on Chrome and Firefox, try it out.

html {
  /* For Firefox */
  overflow-y: scroll;
  scrollbar-color: #008de4 #0d3b97;
  scrollbar-width: thin;
}

/* For Chrome and other browsers except Firefox */
body::-webkit-scrollbar {
    width: 0.5em;
    background-color: #0d3b97;
}
body::-webkit-scrollbar-thumb {
    background-color: #008de4;
}

<html>
<body style="height: 600px"></body>
</html>

You can also customize the scrollbar track using the following (but it will not work for Firefox)

::-webkit-scrollbar-track

Solution 10 - Css

This feature is heavily experimental and I guess Mozilla has a lot to do until it becomes usable for everyone on every page. I have tested many solutions but the following code is working perfectly.

CSS

:root {
  scrollbar-color: #333333 #999999 !important;
  scrollbar-width: thin !important;
}

#ClassName {
  scrollbar-color: #333333 #999999 !important;
  scrollbar-width: thin !important;
}

Reference: LINK 1 LINK 2

Solution 11 - Css

Firefox only accepts:

scrollbar-color: #F8F8F8 // Add your color
scroll-bar-width: thin/auto/none

Solution 12 - Css

2021

Firefox

.nav{
scrollbar-width: 0px;
scrollbar-width: none;}

Chrome

::-webkit-scrollbar {
  height: 0;  /* Remove scrollbar space */
  background: transparent;  
/* Optional: just make scrollbar invisible */
}

for vertical and horizontal scrollbar change the width or height attribute

Solution 13 - Css

It works in user-style, and it seems not to work in web pages. I have not found official direction from Mozilla on this. While it may have worked at some point, Firefox does not have official support for this. This bug is still open https://bugzilla.mozilla.org/show_bug.cgi?id=77790

scrollbar {
/*	clear useragent default style*/
   -moz-appearance: none !important;
}
/* buttons at two ends */
scrollbarbutton {
   -moz-appearance: none !important;
}
/* the sliding part*/
thumb{
   -moz-appearance: none !important;
}
scrollcorner {
   -moz-appearance: none !important;
   resize:both;
}
/* vertical or horizontal */
scrollbar[orient="vertical"] {
	color:silver;
}

check http://codemug.com/html/custom-scrollbars-using-css/ for details.

Solution 14 - Css

The short answer:

Only the following work(s)

in firefox (as of JAN 2022):

property (not pseudo element!)		allowed values
`scrollbar-width`		`thin` (actually very thin)
		`auto` (standard thick version)
		`none` (hides the scrollbar)
`scrollbar-color`		`color color`

You have to set both color values, first scrollbar thumb , second the scrollbar background. It takes any normal color values, using names like "black", hex-values like "#000000", functions like "rgb(0,0,0) as well as variables like "var(--previouslydefinedblack)". BUT it does not take linear gradients as input, neither normally nor via css variable. The order of the properties is unimportant by the way.

Solution 15 - Css

This Works on Wordpress Guys Custom CSS

/* Fire-Fox Scrollbar */
:root{
  scrollbar-face-color: rgb(176, 88, 54); /* Firefox 63 compatibility */
  scrollbar-track-color: rgb(51, 62, 72); /* Firefox 63 compatibility */
  scrollbar-color: rgb(176, 88, 54) rgb(51, 62, 72);
  scrollbar-width: auto;
}

Ref: https://github.com/Aris-t2/CustomCSSforFx/issues/160

Solution 16 - Css

.mat-tab-header {
        overflow-x: scroll !important;
        // For Firefox
        scrollbar-color: transparent transparent;
        border-bottom: none; 
    }
    
      .mat-tab-header::-webkit-scrollbar { // TO Remove horizontal scrollbar in tabs
            display: none !important;
          }

Content Type	Original Author	Original Content on Stackoverflow
Question	Dimitri Vorontzov	View Question on Stackoverflow
Solution 1 - Css	thirtydot	View Answer on Stackoverflow
Solution 2 - Css	Alexander O'Mara	View Answer on Stackoverflow
Solution 3 - Css	Luca Detomi	View Answer on Stackoverflow
Solution 4 - Css	Tomaz	View Answer on Stackoverflow
Solution 5 - Css	Markus Coetzee	View Answer on Stackoverflow
Solution 6 - Css	human	View Answer on Stackoverflow
Solution 7 - Css	rashmi agrawal	View Answer on Stackoverflow
Solution 8 - Css	dig99	View Answer on Stackoverflow
Solution 9 - Css	Gass	View Answer on Stackoverflow
Solution 10 - Css	Figar Ali	View Answer on Stackoverflow
Solution 11 - Css	Justin Bashombana	View Answer on Stackoverflow
Solution 12 - Css	nativelectronic	View Answer on Stackoverflow
Solution 13 - Css	ipirlo	View Answer on Stackoverflow
Solution 14 - Css	LuckyLuke Skywalker	View Answer on Stackoverflow
Solution 15 - Css	Jadam	View Answer on Stackoverflow
Solution 16 - Css	Rayan Lakhdar	View Answer on Stackoverflow