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;
         


        

Answer 1

As of now there is just two property for firefox scrollbar customization is available .

scrollbar-color & scrollbar width

scrollbar-color:red yellow; (track,thumb) scrollbar-width:5px;

HTML

<div class="demo">

css

.demo {
overflow-y:scroll;
}

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

Answer 2

@-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;
    }
}

Answer 3

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/

Answer 4

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

See these answers:

• https://stackoverflow.com/a/54101063/405015
• https://stackoverflow.com/a/53739309/405015

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:

• https://github.com/mdbootstrap/perfect-scrollbar
• https://github.com/Grsmto/simplebar
• https://github.com/vitch/jScrollPane

Answer 5

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.
• dark Show a dark scrollbar, which can be either a dark variant of scrollbar provided by the platform, or a custom scrollbar with dark colors.
• light Show a light scrollbar, which can be either a light variant of scrollbar provided by the platform, or a custom scrollbar with light colors.
• <color> <color> Applies the first color to the scrollbar thumb, the second to the scrollbar track.

Note that dark and light values are not currently implemented in Firefox.

macOS notes:

The auto-hiding semi-transparent scrollbars that are the macOS default cannot be colored with this rule (they still choose their own contrasting color based on the background). Only the permanently showing scrollbars (System Preferences > Show Scroll Bars > Always) are 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>

Answer 6

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.