Changing the scrollbars' style

Question

Is possible to change scrollbars' style for all browsers? If it is, how?

Answer 1

It is possible in Internet Explorer using a number of non-standard scrollbar-* CSS properties. See this page for a handy generator tool.

MSDN Reference

Other than that, it is possible only using custom JavaScript-Powered scrollbar solutions. The jScrollbarPane jQuery plugin looks very nice and easy to install. Here is an examples page.

Answer 2

Nope. IE allows you to set colours for some constituent parts of the scrollbar. Opera allows a few but not all of those styles.

Scrollbar colour styling is of increasing irrelevance as UIs move towards complex image-based scrollbar theming. In IE, setting any of the colours reverts the rendering back to a Windows 2000-style simple-3D scrollbar instead of any swishy user theme. Windows Vista/7 (Aero) users probably won't thank you for that.

You can of course make your own ersatz-scrollbars out of <div>s and style them how you like. But the result almost always behaves worse than real scrollbars, since you're trying to replicate a complex UI element whose expected behaviour is different for each OS. You can spend a lot of time reproducing paging behaviour, keyboard up/down and the mouse wheel, but it'll never quite feel as smooth a real OS scrollbar.

Answer 3

You can style scrollbars for all browsers with a little bit of Javascript. But at present time there is no way to style them using just CSS alone as a cross-browser solution.

This article will help if you decide to use Javascript.