Trang web này sẽ có chức năng hạn chế trong khi chúng tôi trải qua bảo trì để cải thiện trải nghiệm của bạn. Nếu một bài viết không giải quyết được vấn đề của bạn và bạn muốn đặt câu hỏi, chúng tôi có cộng đồng hỗ trợ của chúng tôi đang chờ để giúp bạn tại @FirefoxSupport trên Twitter và /r/firefox trên Reddit.

Tìm kiếm hỗ trợ

Tránh các lừa đảo về hỗ trợ. Chúng tôi sẽ không bao giờ yêu cầu bạn gọi hoặc nhắn tin đến số điện thoại hoặc chia sẻ thông tin cá nhân. Vui lòng báo cáo hoạt động đáng ngờ bằng cách sử dụng tùy chọn "Báo cáo lạm dụng".

Tìm hiểu thêm

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

  • 5 trả lời
  • 1 gặp vấn đề này
  • 2 lượt xem
  • Trả lời mới nhất được viết bởi Linux_Mint_Firefox

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?
Đính kèm ảnh chụp màn hình

Được chỉnh sửa bởi Linux_Mint_Firefox vào

Giải pháp được chọn

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.

Đọc câu trả lời này trong ngữ cảnh 👍 0

Tất cả các câu trả lời (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.

Được chỉnh sửa bởi Terry vào

more options

Giải pháp được chọn

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.