How do I change the browser's scrollbar colours using CSS?

Question

From the Google Results page, the examples I saw were working only in IE and one case in Opera.

Is there any way this can be done consistently across all browsers?

Also, is there a difference between the main scrollbar of the browser (which appears across the whole page) and the scrollbar in a text area withing the page? Can I manipulate only the latter if not the former?

Answer 1

Steve had a good answer, but allow me to continue.

In IE 5.5-7 (but I think they're getting rid of it in 8), you could style the scrollbars with some proprietary MS CSS properties. I wouldn't recommend this.

Steve mentions that the scroll bar outside of the page is up to the browser. Whilst this is true, you could fake it by setting the body element to overflow: hidden and then placing a huge container in the HTML with height: 100%; width: 100%.

I wouldn't recommend you touch the user's scroll bars. They are a well known convention, and they are quickly recognisable by the end user. They know how to use the default OS styled scroll bars, not your quick attempt at cross browser CSS/JS implementation. I think it was Steve Krug that said 'Don't make me think!'

Have you ever seen Flash sites that rolled their own scroll bars? ugh!

Answer 2

You can create your own scrollbars within a page using a combination of CSS and JavaScript. See https://stackoverflow.com/questions/780674/scroll-bar-with-images.

However, rendering of the scrollbar outside the page is up to the browser.

WebKit recently added the ability to style the default scrollbars, but this still only applies within the page.

EDIT: It seems that MooScroll has managed to 'replace' the browser's main scrollbar by telling it there's nothing to scroll and then creating their own scrollbar at the right-most side of the window. Clever!

Steve

Answer 3

Short answer no.

The appearance of the browser is out of your control unfortunately - you're only supplying the contents. It's up to the browser to decide how it wants to scroll the contents.

Answer 4

There is no cross-browser method.