Scrollbar color change in Firefox
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.
Custom CSS Scrollbar for Firefox
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
How to change the scroll bar color in Firefox(Specific)?
Not all browsers will let you control the styling for their scrollbars.
You can fake scroll bars with plugins like this, which claims to be cross-browser compatible:
http://www.kelvinluck.com/projects/jscrollpane-custom-cross-browser-scrollbars/
Styling scroll bar on Firefox. How to get rid of black border/outline on scroll bar?
I experienced the same thing and inspired by your comment, I did some more digging.
This appears to be a bug within Firefox. Screenshots are attached to that bug showing a similar black outline around the scrollbar as you experienced when setting scrollbar-color
. It appears like it's an issue on Windows Firefox only.
A fix was pushed and appears to be slated to be released in Firefox 85.
There was a comment containing a workaround: "If you set widget.disable-native-theme-for-content=true
in about:config
and refresh" that the OP said fixed it, but if your app is public-facing will not be much help. I tried this workaround for my site and it did not work perfectly, it removed the black outline but added a few colored pixels at the top and bottom of the scrollbar (I believe it's related to up/down buttons which are hidden by scrollbar-width: thin
)
Another workaround is to not set scrollbar-color
and the black outline should go away, although that is not the ideal solution when Chrome works correctly when changing scrollbar color to match the theme of your site.
Related Topics
Sass Indented Syntax on Multiple Lines
Are Alternate Nested Styles Possible in CSS
First Letter Capitalize and Other Letters in Lower Case in CSS
Less CSS: Abusing the & Operator When Nesting
CSS Selector Involving Pseudo Class First-Child and Dropcap
Is the :Before Pseudo-Element Allowed on an Input[Type=Checkbox]
How to Use Safe Center with Flexbox
Css3 Combining Selectors with or Instead of And
How to Make Sure Select Option Text Align in the Center in Ie
Why Doesn't This CSS :Not() Declaration Filter Down
Clip-Path Without Clipping Content
Rails 4: How to Use SASS Mappings
Why Does Enabling Hardware-Acceleration in CSS3 Slow Down Performance
Absolute Positioning Ignoring Padding of Parent
Twitter Bootstrap: Div in Container with 100% Height