How can change the default scrollbar design in css?

Question

Generally we use overflow:scroll; for scrollbar, is there any way to change the default scrollbar design using CSS (or) is that a good practice to change the default scrollbar design?

Answer 1

@shemy's answer is the best to use. I wouldn't advise using JavaScript for something like this. Realistically you're not going to get custom scroll bars to work reliably across browsers. If you're happy with it as just an enhancement for WebKit browsers, then go ahead. If it's all or nothing, then it's nothing.

Generally I would say unless there is a very good reason, don't change the scroll bars (at least not too dramaticallly), for the same reason I tell people not go too mad with customising form controls --- these controls are standard across the user's OS and they are familiar with them, changing them can be very jarring and upset the use experience.

Answer 2

You can change scrollbar design using css only for webkit. See example http://fiddle.jshell.net/desandro/X6zfS/ For other browsers you'll have to use js (for example you can use scrollbar plugin for jQuery) or live your scrollbars as is.