Styling Browser Scrollbar

Question

I saw this years before, but since it was not widely supported, websites are dropping usage of it.

I am currently designing a website which will have scrollbars inside the design and wondering whether CSS2 have any specification on styling browser crossbars because the default colours doesn't fit. If there's no specification, any reference to specific browser behaviour would be appreciated.

If there's no CSS specification on it, I would have to rely on custom generated scroll bar using JS. References on how to build one is also appreciated.

Answer 1

Is THIS what you are looking for?

Answer 2

You can do it like this:

<style>
body {
    scrollbar-face-color: #000000;
    scrollbar-highlight-color: #000000;
    scrollbar-shadow-color: #000000;
    scrollbar-3dlight-color: #000000;
    scrollbar-arrow-color: #000000;
    scrollbar-track-color: #000000;
    scrollbar-darkshadow-color: #000000;
}
</style>

but it only works in Internet Explorer and Opera (thanks, Julien!). And you might want to use different colours. 8-)

Answer 3

WebKit supports another mechanism.

Answer 4

I quote myself from this thread, since it's related:

From a usability point of view, changing scroll bars is a no-go. The user is familiar with his/her operating system and the visual environment it provides. Changing this does create confusion, especially among those who are new to using computers, old people etc.

The majority of users today will probably recognize a scroll bar as long as it has it's basic shape - and many will not even use the bar itself, but just the scroll wheel on the mouse.

It's still a thing to think about though. Consider your audience. And whatever you do make sure it actually works on all platforms/in all browsers if you use a custom scroll bar.

Answer 5

many browsers support some sort of styling the scrollbars, but nothing of it is standardised in css.

also, as arve systad said, changing such basic widgets of the OS is a no-go—though one should be careful with changing buttons then too

Answer 6

A JavaScript solution can be found at http://www.hesido.com/web.php?page=customscrollbar, note that you do have to pay for this, but even if you don't want to go that route it shows what is possible.

Otherwise a Jquery solution and a Prototype solution are also available.

Answer 7

I haven't gotten around to trying these solutions, but they do look very promising and are claimed to degrade nicely.

This would be my first choice
http://www.hesido.com/web.php?page=customscrollbar

http://www.n-son.com/scripts/jsScrolling/new/example5.html