27

I want to change the scrollbar color in Firefox. How can I do that?

5
  • This is possible only in IE and Opera I think...
    – rhino
    Oct 8, 2010 at 12:34
  • 3
    no, that's not possible, and I'm glad Firefox doesn't allow just anyone to change my scrollbar.
    – Lie Ryan
    Oct 8, 2010 at 12:37
  • Just so you know, I got the jQuery to work (martinsmucker.com/demo/scroller.html), so I've updated my answer with some step-by-step instructions and explanations of what's happening. Let me know if you still have any problems. Oct 8, 2010 at 14:02
  • 1
    It's totally asinine for Firefox to exert this kind of control over visual elements on the page. Who's to say their approach to the design of a scrollbar is correct for visually impaired people. FAIL!
    – arxpoetica
    Mar 17, 2012 at 13:40
  • 2
    40% (2 out of 5) of the above comments don't seem to be very helpful. If you're not going to supply help, don't comment please. Not sure if you’ve found a solution yet, but I found this article very helpful. It does not work in IE or Firefox since they only allow you to control a few aspects of the scrollbar styling. css-tricks.com/custom-scrollbars-in-webkit May 7, 2014 at 19:44

9 Answers 9

13

Changing the scrollbar color in Firefox is not as trivial as it is in Internet Explorer and Opera. Firefox only allows the style of the scrollbar to be set by the theme. This is a good thing. Lots of users don't like having the look and feel of interface widgets randomly changed at the whim of a designer. Changing the look of interface pieces can be even more of a problem for visually impaired visitors who may be using a high contrast theme.

That said, if the scrollbar is contained within a <div> in your page, you can create a custom scrollbar and make it functional using JavaScript. This jQuery plugin looks like it would do the trick pretty nicely: http://jscrollpane.kelvinluck.com/

I think this is more or less what you want to do: http://martinsmucker.com/demo/scroller.html

Here's how it works:

Inside the document's <head>, we have to reference several stylesheets and scripts (which you've probably already downloaded from http://jscrollpane.kelvinluck.com/.

This is where a vast majority of the magic happens:

<!-- Styles -->
<link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" />
<style type="text/css">
    html, body {
        height: 100%;
        margin: 0;
        padding:0;
    }
    #container {
        height:100%;
        width:100%;
        margin: 0;
        padding:0;
        overflow: auto;
    }
</style>

<!-- Scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.scroll-pane').jScrollPane();
    });
</script>

This assumes that the css and js files are located in the same directory as your html file. We start by linking to the provided stylesheet.

Then, add a bit of CSS to prevent the normal scrollbars from showing. Set the margin and padding of html and body to 0, and set the height to 100%. All of our content will be wrapped in a div with an id of "container". This container fills the page exactly (height: 100%; width:100%;) and it steals the scrolling so that we can customize the scrollbar (overflow: auto;).

Then we reference all of the appropriate scripts. Here I'm using the copy of jQuery hosted by Google, and again I'm assuming that all of the local scripts are in the same directory as the html file. The last little bit of jquery finds all of the divs with the "scroll-pane" class and adds the appropriate elements and scroll functionality to them.

The html is then very simple.

<body>
    <div class="scroll-pane" id="container">
    All of your content for the page goes here.
    </div>
</body>

If you've done everything right, your page should look like my example.

4
  • <link type="text/css" href="../../style/jquery.jscrollpane.css" rel="stylesheet" media="all" /> <!-- the styles for the lozenge theme --> <link type="text/css" href="style/jquery.jscrollpane.lozenge.css" rel="stylesheet" media="all" />
    – XMen
    Oct 8, 2010 at 12:49
  • <script type="text/javascript" src="../../script/jquery.jscrollpane.min.js"></script> $('.scroll-pane-arrows').jScrollPane( { showArrows: true, horizontalGutter: 10 } );
    – XMen
    Oct 8, 2010 at 12:50
  • Have you also included the jQuery javascript library? Oct 8, 2010 at 12:54
  • @Rahul, could you edit your original post to show the code as it currently looks in your website? I think that would be really helpful. Oct 8, 2010 at 13:19
8

Chrome and Safari do support the coloring of the scrollbars. Place the following code in your css and see the magic happen:

::-webkit-scrollbar {
  height: 12px;
  width: 12px;
  background: #969696;
  -webkit-border-radius: 1ex;
}

::-webkit-scrollbar-thumb {
  background: #2B2B2B;
  -webkit-border-radius: 1ex;
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}

::-webkit-scrollbar-corner {
  background: #1A1A1A;
}

The only thing missing is for firefox to support this feature.

8

Since version 64 Firefox allows limited styling of scrollbars:

.my-scrollable {
   scrollbar-color: red blue;
   scrollbar-width: thin;
}

See https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color

4

It is not possible directly via CSS.

But if you can use jQuery, jscrollpane may help you.

6
  • <link type="text/css" href="../../style/jquery.jscrollpane.css" rel="stylesheet" media="all" /> <!-- the styles for the lozenge theme --> <link type="text/css" href="style/jquery.jscrollpane.lozenge.css" rel="stylesheet" media="all" /> –
    – XMen
    Oct 8, 2010 at 12:52
  • <script type="text/javascript" src="../../script/jquery.jscrollpane.min.js"></script> $('.scroll-pane-arrows').jScrollPane( { showArrows: true, horizontalGutter: 10 } ) ; but it didnt wokr why
    – XMen
    Oct 8, 2010 at 12:53
  • You'll also need a <script></script> that points to the jScrollPane.js file (and before it, you'll need to make sure you're referencing the jQuery library). It might be helpful if you post a larger chunk of your code in the original question. Oct 8, 2010 at 12:53
  • i have included the jquery file also
    – XMen
    Oct 8, 2010 at 12:55
  • 1
    Can you edit your question and post what you tried? It is difficult to read code in comments. Try posting logically complete block(s)
    – Nivas
    Oct 8, 2010 at 13:13
2

you can't. as you can see here, this is only possible fpr IE5+ and Opera7.2+.

EDIT: with a bit of javascript it could be possible to build you own "html-scrollbars" that could be styled like you want them - but i don't think you should do that, writing this just to be detailed.

2

Well, I have heard someone saying "It's Impossible"... But I don't believe in the impossible.

In the follwing example I only want to stylize the <ul> list in the main sidebar. Simply try this solution for Firefox scrollbar stylizes:

<div class="parent">
<div class="sidebar">
<ul class="scrollable">
<li></li>
</ul>
</div>
</div>

The Css will be:

.scrollable {
overflow: auto;
max-height:80vh;
overflow-y: scroll;
scrollbar-color: #0A4C95 #C2D2E4;
}

.scrollable::-webkit-scrollbar {
width: 0.5em!important;
}

.scrollable::-webkit-scrollbar-track-piece {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
}

.scrollable::-webkit-scrollbar-thumb:vertical {
background-color: #ddd;
outline: 1px solid slategrey;
}

Here are the final results:

(Note: The first image is the default scrollbar color).

enter image description here

1
  • Note: If you want to make the scrollbar width thinner than the one shown in the image just add scrollbar-width:thin; to the div .scrollable. Thanks
    – Jodyshop
    Dec 15, 2019 at 22:20
0

This is not really useful as far as I know, but it's worth noting that the attribute which controls whether or not scrollbars are displayed in Firefox is: (reference link)

Attribute....scrollbars
Type.........nsIDOMBarProp
Description..The object that controls whether or not scrollbars 
             are shown in the window. This attribute is "replaceable" 
             in JavaScript. Read only

Firefox also has the following vendor specific properties:

overflow: -moz-scrollbars-none

other valid values are -moz-scrollbars-horizontal and -moz-scrollbars-vertical.

0

for Firefox or cross browser you can use : jQuery custom content scroller

more simple and easy to use

here sample i implement in magento and tested on firefox, opera, chrome and safari : https://i.stack.imgur.com/wnRCL.png

0

In Firefox V103 coloring scrollbar works with:

html, body{scrollbar-color: #f33942 #000;}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.