How do I change the scrollbar color for responsive design development?
I need the ability to make the scrollbars darker or another color when in responsive design mode. Sometimes I have a website that is light and the scrollbars are hard to see against it.
Since I'm developing, I need to know when they appear to adjust my media queries. Right now they are too light and too transparent to "debug" my sites with.
All Replies (5)
Personally, I use and recommend the NewScrollbars add-on.
This add-on will allow you to fully customize the Firefox scroll bars.
ComputerWhiz, the OP is referring to the scrollbars on the page inside Firefox, not the scrollbars on Firefox window on right side and bottom.
@James
This add-on will allow you to change all of the scroll bars displayed on Firefox. That includes scroll bars inside of webpages, as well as the scroll bars on the side and bottom of the Firefox window.
Some restrictions apply.
ComputerWhiz, even if this Extension to be more specific still styles the scrollbars on webpage also, this is not what pers0n was asking for help on. The OP was asking for assistance on how to style the scrollbars on his own pages so they can stand out better for him and website viewers in general.
pers0n, if you have example sites or pages that can be viewed or even the code then perhaps posting in http://forums.mozillazine.org/viewforum.php?f=25 will get you better help. Note that new members first post there requires post approval.
@James
Thank you for that clarification.
@pers0n
You can use this CSS code. It needs to be inserted into the head of your website.
<STYLE>BODY {
SCROLLBAR-FACE-COLOR: red; SCROLLBAR-HIGHLIGHT-COLOR: gray;
SCROLLBAR-SHADOW-COLOR: black; SCROLLBAR-ARROW-COLOR: gray;
SCROLLBAR-TRACK-COLOR: black; SCROLLBAR-DARKSHADOW-COLOR: red
}
</STYLE>
This code is from JavaScript Best Codes