Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How do I change the scrollbar color for responsive design development?

more options

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.

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)

more options

Personally, I use and recommend the NewScrollbars add-on.

This add-on will allow you to fully customize the Firefox scroll bars.

more options

ComputerWhiz, the OP is referring to the scrollbars on the page inside Firefox, not the scrollbars on Firefox window on right side and bottom.

more options

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

more options

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.

more options

@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