为提升您的使用体验,本站正在维护,部分功能暂时无法使用。如果本站文章无法解决您的问题,您想要向社区提问的话,请到 Twitter 上的 @FirefoxSupport 或 Reddit 上的 /r/firefox 提问,我们的支持社区将会很快回复您的疑问。

搜索 | 用户支持

防范以用户支持为名的诈骗。我们绝对不会要求您拨打电话或发送短信,及提供任何个人信息。请使用“举报滥用”选项报告涉及违规的行为。

详细了解

[SOLVED] How to prevent website body background color from coloring my scrollbars?

more options

I operate a website in which the body background is black. My background image has a black background. And inside the body, I place a white-background div, which carries the text. My issue is, the scroll trough is some shade of black and the scrollbar is a lesser shade of black.

On any white-body website, I have visible shades of grey and I can see my scrollbar controls.

Where do I go to apply !important CSS rules to my browser interface? I want to establish a suitable color scheme for my scrollbars that override website CSS.

//EDIT: I've found a few typos and fixed them, above. I have then added the text below:.

If I edit the stylesheet to change the body background color on the website, it affects the scrollbar coloring, and ruins the website appearance.

Only if some developer would use the Linux system colors in Firefox so that theme colors are the same in Firefox as they are in the Linux apps that follow the rules, then Firefox would be a much better browser. Is there an add-on that will resolve this issue?

Is there a CSS fix that I can apply? In past decades, websites wanted to color the scrollbars but they are the property of the user, not an extension of the website. What's become of that idea?

I operate a website in which the body background is black. My background image has a black background. And inside the body, I place a white-background div, which carries the text. My issue is, the scroll trough is some shade of black and the scrollbar is a lesser shade of black. On any white-body website, I have visible shades of grey and I can see my scrollbar controls. Where do I go to apply !important CSS rules to my browser interface? I want to establish a suitable color scheme for my scrollbars that override website CSS. //EDIT: I've found a few typos and fixed them, above. I have then added the text below:. If I edit the stylesheet to change the body background color on the website, it affects the scrollbar coloring, and ruins the website appearance. Only if some developer would use the Linux system colors in Firefox so that theme colors are the same in Firefox as they are in the Linux apps that follow the rules, then Firefox would be a much better browser. Is there an add-on that will resolve this issue? Is there a CSS fix that I can apply? In past decades, websites wanted to color the scrollbars but they are the property of the user, not an extension of the website. What's become of that idea?
已附加屏幕截图

由Linux_Mint_Firefox于修改

被采纳的解决方案

cor-el said

You can place code in userContent.css to apply CSS rules to a website (userChrome.css is for the user interface). You can enclose the code in a '@-moz-document domain(){}' block to apply he rules only to this domain.
@-moz-document domain(support.mozilla.org){
 /* add your style rules */
}


It took me awhile to find out what to put in the userContent.css, which I also had to enable in about:config.

FromVertical Scrollbar Too Small Issues I got the answer to my issue, from Cor-el, naturally! userContent.css:

  • { scrollbar-color: auto! important; scrollbar-width: auto !important; }

The line of CSS I put in was:

  • { scrollbar-color: red #9c6! important; scrollbar-width: 30px !important; }

I like the width of mine better than the auto, and the colors may change.

[Quote]In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

toolkit.legacyUserProfileCustomizations.stylesheets = true [Close Quote] -- Cor-el

This same answer that solved narrow scrollbars also solved my scrollbars' color issue.

On another note, where I know what to do with CSS, I did some work on my black-background site and put in a div that holds all the content of my page. I set a style with height: 99vh; . That's 99% of my viewport, and I put a scrollbar on the div, which I can color and set width on. Only Firefox users see the color and width, unless they have usurped my colors with the solution above. I tested on the Chromium browser and came up with the scrollbar but no styling.

Consider this one solved. Thank you.

定位到答案原位置 👍 0

所有回复 (5)

more options
more options

cor-el said

See:

Cor-el, is there a place in my browser profile to put this CSS for my own use, or do I put this on my website and set every Firefox that visits me?

Thank you for your response.

more options

You can place code in userContent.css to apply CSS rules to a website (userChrome.css is for the user interface). You can enclose the code in a '@-moz-document domain(){}' block to apply he rules only to this domain.

@-moz-document domain(support.mozilla.org){
 /* add your style rules */
}


more options

You can put scrollbar colours in a file userContent.css which you place in a folder chrome in your profile folder, thus ~/.mozilla/firefox/profile_folder/chrome

EDIT: the code does NOT work as well as it did prior to Firefox 89. The colour of my scrollbar thumb darkens when I hover or hold. Another user has reported a similar change of colouring.

由Terry于修改

more options

选择的解决方案

cor-el said

You can place code in userContent.css to apply CSS rules to a website (userChrome.css is for the user interface). You can enclose the code in a '@-moz-document domain(){}' block to apply he rules only to this domain.
@-moz-document domain(support.mozilla.org){
 /* add your style rules */
}


It took me awhile to find out what to put in the userContent.css, which I also had to enable in about:config.

FromVertical Scrollbar Too Small Issues I got the answer to my issue, from Cor-el, naturally! userContent.css:

  • { scrollbar-color: auto! important; scrollbar-width: auto !important; }

The line of CSS I put in was:

  • { scrollbar-color: red #9c6! important; scrollbar-width: 30px !important; }

I like the width of mine better than the auto, and the colors may change.

[Quote]In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

toolkit.legacyUserProfileCustomizations.stylesheets = true [Close Quote] -- Cor-el

This same answer that solved narrow scrollbars also solved my scrollbars' color issue.

On another note, where I know what to do with CSS, I did some work on my black-background site and put in a div that holds all the content of my page. I set a style with height: 99vh; . That's 99% of my viewport, and I put a scrollbar on the div, which I can color and set width on. Only Firefox users see the color and width, unless they have usurped my colors with the solution above. I tested on the Chromium browser and came up with the scrollbar but no styling.

Consider this one solved. Thank you.