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.

Please share how you can do it using jQuery. I'm faced with the same problem but used CSS to fix it for Webkit. However, Firefox poses a problem that your jQuery solution may be able to help with. — Igbanam
– Igbanam, Commented Jun 9, 2012 at 3:37
There is an issue with jScrollPane in Firefox. jScrollPane works perfectly in Chrome but in Firefox you have an empty system scrollbar to the right of the jScrollPane scrollbar. There should only be one scrollbar — Igbanam
– Igbanam, Commented Jul 26, 2012 at 15:33
Not true. If you have that, you did something wrong somewhere. — Dimitri Vorontzov
– Dimitri Vorontzov, Commented Aug 19, 2012 at 10:05
See my answer here: stackoverflow.com/questions/7357203/custom-scrollbars/… — Buzinas
– Buzinas, Commented Sep 6, 2015 at 15:34

thirtydot · Accepted Answer · 2020-06-20 23:20:47Z

290

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:

edited Jun 20, 2020 at 23:20

answered May 29, 2011 at 1:49

thirtydot

229k51 gold badges393 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

17 Comments

Dimitri Vorontzov Over a year ago

Thank you, ThirtyDot. One question though: what about -moz-appearance:scrollbartrack-vertical - and other related CSS extensions? Perhaps they can be used in some way?

thirtydot Over a year ago

No. Unfortunately, none of the possible values for -moz-appearance can help.

"The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using a platform-native styling based on the operating system's theme."

- you'll just get a native scrollbar.

Dimitri Vorontzov Over a year ago

Just in case anyone reading this needs a practical solution, I ended up using jscrollpane jQuery plugin.

thephpdev Over a year ago

@JacquesMathieu, I see what you mean. Though that is not Baron's fault, if I download the page and prevent baron from initialising, the bug still occurs. So it looks like Chrome it at fault here.

wegry Over a year ago

drafts.csswg.org/css-scrollbars-1 is the stage 1 start of the spec, but it's enabled in Firefox Nightly now out of the box by default.

|

Alexander O'Mara · Accepted Answer · 2023-01-24 01:57:04Z

135

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 that were not implemented in Firefox. These values have since been removed from the spec.

On stock Android with mobile Firefox the thumb can be colored, but there is no track to color.

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-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-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.

On stock Android with mobile Firefox the auto width thumb is already rather thin, and thin does not make it thinner.

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>

edited Jan 24, 2023 at 1:57

answered Jan 8, 2019 at 23:09

Alexander O'Mara

60.9k19 gold badges176 silver badges184 bronze badges

12 Comments

thirtydot Over a year ago

Thanks for this answer. I've updated my accepted answer to promote this (and the other relevant answer) so that people are more likely to see it.

vhs Over a year ago

This essentially duplicates Luca's answer from three weeks prior.

Alexander O'Mara Over a year ago

@JoshHabdas That answer does not contain nearly as much compatibility or usage information. I created this answer because the other answer didn't have the important information I was looking for.

vhs Over a year ago

You could give them credit, suggest feedback or consider editing their answer.

Alexander O'Mara Over a year ago

@JoshHabdas Well, 5 people already found it useful, and it contains information not found anywhere else on the web, so I disagree.

|

Luca Detomi · Accepted Answer · 2018-12-13 08:15:22Z

75

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;

edited Dec 13, 2018 at 8:15

answered Dec 12, 2018 at 8:58

Luca Detomi

5,7668 gold badges58 silver badges81 bronze badges

1 Comment

vhs Over a year ago

Looks like IE 5.5 may have gotten something right after all. :)

Mehdi Dehghani · Accepted Answer · 2017-07-05 14:14:55Z

43

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/

edited Jul 5, 2017 at 14:14

Mehdi Dehghani

11.7k6 gold badges64 silver badges68 bronze badges

answered May 26, 2015 at 17:19

Tomaz

5394 silver badges9 bronze badges

6 Comments

stvnrynlds Over a year ago

This doesn't answer the question, unfortunately. Dimitri is trying to style the scrollbar, not hide it.

Tomaz Over a year ago

That was 4 years ago (I'm aware of that) so I'm sure he already did something by now. But the topic is still relevant today - while other browsers allow some type of "illegal" modification of scrollbars, FF doesn't. That's why I decided to post it.And the front-end result is visually styling scrollbar, regardless of the fact that the way to do it is hiding part of it.

RozzA Over a year ago

i love this solution except for all the extra markup with absolute positioning (makes variable size stuff a nightmare) plus you cannot actually change the style, you are simply masking/hiding elements of the existing scroller - too bad if i want a green bar!

tmthyjames Over a year ago

yea, after four years, it's not about answering the OP's question as much as it is contributing to the community.

Filip Dupanović Over a year ago

The essence of the problem is that the solutions provided by some rendering engines are non-standard. This is the question that best addresses my concerns and this is the answer I was scrolling for.

|

human · Accepted Answer · 2020-02-14 10:47:26Z

40

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

answered Feb 14, 2020 at 10:47

human

4714 silver badges6 bronze badges

2 Comments

AbeIsWatching Over a year ago

Good news, but how can we change the outline?

Adam Over a year ago

This Works on Wordpress Guys, Thanks <3

Peter Mortensen · Accepted Answer · 2021-08-31 19:50:51Z

36

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.

edited Aug 31, 2021 at 19:50

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jul 28, 2013 at 11:06

Markus Coetzee

3,4441 gold badge32 silver badges26 bronze badges

4 Comments

forivall Over a year ago

There's also trackpad scroll emulator -- it's what twitch.tv uses.

Leonard Teo Over a year ago

Perfect Scrollbar is actually really good. After exhausting many other options, I found it to be the best solution. Thanks for suggesting it.

Danny R Over a year ago

nanoScroller is also really good, and relatively lean. jamesflorentino.github.io/nanoScrollerJS Opposed to the heavy JS plugins, this one simply hides the native scroller, and shows an alternate scroller using the native 'scroll' event

RozzA Over a year ago

i've been avoiding all of the jquery solutions, since they all lag out on slower machines or machines under stress, but PS looks like a winner

Gass · Accepted Answer · 2022-01-20 11:03:00Z

9

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

answered Jan 20, 2022 at 11:03

Gass

9,6405 gold badges47 silver badges53 bronze badges

1 Comment

Naredla Nithesh Reddy Over a year ago

But still there are few things which needs improvement from firefox side. Like, When you have the overflow content, scrollbar is coming inside the control. this effects the inner elements width, where as in chrome the control size will be unaltered and the scrollbar will get added at the edge of control.

MonoWolfChrome · Accepted Answer · 2022-01-04 14:00:19Z

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

scrollbar-width only supports 3 values: none, thin and auto - developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width
And the position of scrollbar inside element effects the inner elements width.it will take 15px when scrollbar presents. This makes inner elements width related styles inconsistent when we set the overflow to auto. :(

dig99 · Accepted Answer · 2022-07-25 09:26:21Z

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>

Keyword values scrollbar-width: auto|thin|none;

Global values scrollbar-width: inherit|initial|revert|revert-layer; scrollbar-width: unset;

Firefox 84 was released on December 15, 2020. Removed Properties are as follows:

Removed proprietary -moz-default-appearance property values scrollbar-small (scrollbar-width: thin is used instead) and scrollbar (macOS only; scrollbar-horizontal and scrollbar-vertical are used instead) (bug 1673132).

nativelectronic · Accepted Answer · 2021-10-26 02:21:22Z

3

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

answered Oct 26, 2021 at 2:21

nativelectronic

8928 silver badges11 bronze badges

Comments

Penny Liu · Accepted Answer · 2021-05-31 14:49:21Z

2

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

OR

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

Reference: LINK 1 LINK 2

edited May 31, 2021 at 14:49

Penny Liu

17.9k5 gold badges89 silver badges109 bronze badges

answered Apr 13, 2021 at 13:53

Figar Ali

8661 gold badge10 silver badges18 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2021-08-31 20:41:49Z

2

Firefox only accepts:

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

edited Aug 31, 2021 at 20:41

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jun 30, 2021 at 16:57

Justin Bashombana

1816 bronze badges

Comments

LuckyLuke Skywalker · Accepted Answer · 2022-01-29 20:58:33Z

2

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.

answered Jan 29, 2022 at 20:58

LuckyLuke Skywalker

8512 gold badges8 silver badges18 bronze badges

4 Comments

LuckyLuke Skywalker Over a year ago

For the standard scrollbar use these via the html selector. And please comment in case sth changes.

LuckyLuke Skywalker Over a year ago

(offtopic: in chrome it still works like this btw: developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar and bear in mind that stackoverflow.com/a/67902128/14824067 )

David Martins Over a year ago

Both "thin" and "auto" render exactly the same way in Firefox; a thin 1 or 2 pixels wide scrollbar.

LuckyLuke Skywalker Over a year ago

@DavidMartins Can be :/ ( - I didn't try this in a whole while - I'd wish they'd just enable a few more possibilities with firefox anyways :) ).

user2952080 · Accepted Answer · 2024-03-29 00:21:56Z

As in 2024 scrollbar-color is applying also for chrome. To ensure a cross-browser solution, it's advisable to separate the styles for Firefox using the @-moz-document rule.

@-moz-document url-prefix() {
  * {
    scrollbar-color: green white;
  }
}

::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 14px;
}

::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
  background-color: white;
}

::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: red;
  border: 4px solid red;
}

<div style="overflow: scroll; width: 200px; height: 150px;">
  <span style="color: green;">GREEN</span> scrollbar in Firefox, <span style="color: red">RED</span> scrollbar in Chrome. 
<div style="color: #ccc;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, justo at tincidunt aliquet, nunc nisl lacinia nunc, vel tincidunt nisl mauris id nunc. Nullam euismod, nunc a lacinia ultrices, nisl nisl aliquam justo, nec tincidunt nunc nisl id nunc.
  Sed euismod, justo at tincidunt aliquet, nunc nisl lacinia nunc, vel tincidunt nisl mauris id nunc. Nullam euismod, nunc a lacinia ultrices, nisl nisl aliquam justo, nec tincidunt nunc nisl id nunc.</div>
</div>

Adrian Rodriguez · Accepted Answer · 2014-05-29 20:41:37Z

0

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.

edited May 29, 2014 at 20:41

Adrian Rodriguez

3,2672 gold badges26 silver badges34 bronze badges

answered Jul 31, 2013 at 15:52

ipirlo

1306 bronze badges

4 Comments

Satinder singh Over a year ago

i tried as same as you written, but its not working for my in FF, check the jsfiddle.net/gGbkY/1 am i missing something ?

ipirlo Over a year ago

It works in user-style, and it seems not to work in web pages. I have not found official direction from Mozilla on this.

Marecky Over a year ago

What's the user-style?

Sterling Bourne Over a year ago

The bug you linked was reported 17 years ago and still hasn't been assigned. I think it's safe to say that FF will never support the hiding of native scrollbars.

Adam · Accepted Answer · 2022-02-19 23:00:29Z

0

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

answered Feb 19, 2022 at 23:00

Adam

3233 silver badges18 bronze badges

Comments

Rey · Accepted Answer · 2022-08-27 13:17:58Z

0

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

edited Aug 27, 2022 at 13:17

Rey

4,0865 gold badges35 silver badges62 bronze badges

answered May 14, 2022 at 16:12

Rayan Lakhdar

311 bronze badge

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

AzureIP · Accepted Answer · 2024-03-04 13:49:29Z

0

My solution: add for other browsers what you want, and for firefox add:

@-moz-document url-prefix() {
    div {
        scrollbar-width: thin;
    }
}

This is conditioned. So affects only firefox. It makes the scrollbar thin.

answered Mar 4, 2024 at 13:49

AzureIP

3953 silver badges12 bronze badges

Comments

Stefan Steiger · Accepted Answer · 2025-03-04 16:16:20Z

Note:
You need to media-query them, otherwise you kill the styled Chrome-scrollbars.
Also, you need to apply the scrollbars for the document on the html element, not the body-element.

Firefox-Scrollbars:

@-moz-document url-prefix()
{

    html
    {
        scrollbar-color: #D2D2D2 #2E3645;
        scrollbar-width: thin; /* auto, thin, none*/
    }

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

Chrome-Scrollbars

* {
    scrollbar-arrow-color: #FFA500;
    scrollbar-base-color: black;
    scrollbar-dark-shadow-color: #aaaaaa;
    scrollbar-track-color: black;
    scrollbar-face-color: #3d3d3d;
    scrollbar-shadow-color: gray;
    scrollbar-highlight-color: silver;
    scrollbar-3d-light-color: black;}

::-webkit-scrollbar{width: 13px; height: 13px}
::-webkit-scrollbar:hover{height: 18px}
 
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment{
    height: 15px;
    width: 13px;
    display: block;
    background: #101211;
    background-repeat: no-repeat}
 
::-webkit-scrollbar-button:horizontal:decrement{
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADlQTFRFEBIREhQSHSAWIiUYJioZNz0gPkQjQEcjRUwlSVAnXWYuaHIyanQziJY/mKdFq7xMssRPw9dVyt5YQCZ/wAAAACtJREFUCB0FwQECgBAQALBFlKi4/z/WBlKD45kJ1x8DdUXccL7RgfJlQLEBGtwA6QSuDq4AAAAASUVORK5CYII=');
    background-position: 4px 3px}
 
::-webkit-scrollbar-button:horizontal:increment{
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFEBIREhQSHSAWJioZNz0gPEIiQkkkRUwlR04mYWswanQziJY/mKdFq7xMssRPw9dVyt5Ye+rBnQAAACpJREFUCB0FwYkBgCAQACD8U9Nu/2kDKqC8FVixC4yIr2HF6ch3JqQnww8VPADN4gkr7wAAAABJRU5ErkJggg==');
    background-position: 3px 3px}
 
::-webkit-scrollbar-button:vertical:decrement{
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAIAAABLMMCEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHFJREFUeNpiFBASZAADPSOhS+feQdhMEEpEjKN5gpGRuTCKaEqeGicXc2q+OhMTI1RUx0DQyUMSyFBW4/UOkgEyWICSCVkqS2bfvX/ns7wST3C0woFdLxiNLeQ+fvj95tUPiFHcPCxAaxnhbkAGAAEGAAxaGY5HzMiTAAAAAElFTkSuQmCC');
    background-position: 3px 4px}
 
::-webkit-scrollbar-button:vertical:increment{
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADlQTFRFEBIREhQSGx4VHSAWIiUYJCgZMTYePEIiPkQjRUwlSVAnXWYuanQziJY/nKxGp7hLsMFOwdRVyt5YRs1JvwAAACxJREFUCB0FwQsCQCAUALCl6CPi3f+wbQDGgXLJ3xzzTdwRUZFWPKD/J9CwARrSAPmqOpeUAAAAAElFTkSuQmCC');
    background-position: 3px 4px}
 
/*
REM: Konnte ich nicht finden
::-webkit-scrollbar-button:horizontal:decrement:active {background-image: url(../images/Scrolling/black/horizontal-decrement-arrow-active.png); }
::-webkit-scrollbar-button:horizontal:increment:active {background-image: url(../images/Scrolling/black/horizontal-increment-arrow-active.png); }
::-webkit-scrollbar-button:vertical:decrement:active {background-image: url(../images/Scrolling/black/vertical-decrement-arrow-active.png); }
::-webkit-scrollbar-button:vertical:increment:active {background-image: url(../images/Scrolling/black/vertical-increment-arrow-active.png); }
*/

::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px}

::-webkit-scrollbar-track-piece{background-color: #151716;}
 
::-webkit-scrollbar-thumb:vertical{
    height: 50px;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #4d4d4d), color-stop(100%, #333333));
    border: 1px solid #0d0d0d;
    border-top: 1px solid #666666;
    border-left: 1px solid #666666; 
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5)}
 
::-webkit-scrollbar-thumb:horizontal{
    width: 50px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4d4d4d), color-stop(100%, #333333));
    border: 1px solid #1f1f1f;
    border-top: 1px solid #666666;
    border-left: 1px solid #666666; 
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5)}

::-webkit-scrollbar-corner{background-color: #3D3D3D;}

Collectives™ on Stack Overflow

Custom CSS Scrollbar for Firefox

19 Answers 19

17 Comments

12 Comments

1 Comment

6 Comments

2 Comments

4 Comments

Year 2022

1 Comment

3 Comments

Comments

Comments

Comments

Comments

Only the following work(s)

4 Comments

Comments

4 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

19 Answers 19

17 Comments

12 Comments

1 Comment

6 Comments

2 Comments

4 Comments

Year 2022

1 Comment

3 Comments

Comments

Comments

Comments

Comments

Only the following work(s)

4 Comments

Comments

4 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related