Reputation: 770
I am making a Google Chrome extension to change the appearance of the (Webkit) scrollbars. I want them to "blend in" with the rest of the page. What I was thinking of doing is reading the page's background colour and assigning it to the background-color of ::-webkit-scrollbar-track-piece. Is this possible?
Also, is it possible to tell if the scrollbar I'm changing is one of the main ones (as opposed to an in-page one).
P.S: I'm really a beginner when it comes to web development.
Upvotes: 0
Views: 134
Reputation: 11623
With a content script you can read the CSS data, and then inject the proper styles on to the page.
As an example, the following will style just the "body" scrollbars:
body::-webkit-scrollbar {background-color:#000}
Upvotes: 1
Reputation: 211980
No, you can't do it in pure CSS, You'd need at least Javascript to accomplish this, but it's probably impossible in Chrome, and for good reason.
The last time I remember this being possible is in IE6. It's a risky idea in general to change user interface elements that are common to all applications on a platform, because the user has to relearn how to use your application.
Think of the best-designed sites on the internet. You probably don't spend much time wishing their scrollbars blended in better. It's just unnecessary, and the downside (confusing the user) far outweighs the upside (possibly making the scrollbars slightly prettier).
Upvotes: 0