How to change the Scroll bar color

Question

Using Internet Explorer and FireFox

I want to change my scroll bar color

Code

<div style="overflow: auto; width: 750px; height: 400px">   
</div>

The Above code is for Scroll bar, But How to change the scroll bar color.

Tried code.

<STYLE TYPE="text/css">

BODY
{
scrollbar-base-color: orange;
scrollbar-arrow-color: green;
scrollbar-DarkShadow-Color: blue;
}
</STYLE>

The above code is added in my header tag. But the color was not changing.

Can any one help me.

Answer 1

That code only works in Internet Explorer. Are you testing in Firefox or Safari by chance?

Answer 2

Try this

*, html {
scrollbar-face-color: #FF0000;
scrollbar-shadow-color: #0000FF;
scrollbar-highlight-color: #00FF00;
scrollbar-3dlight-color: #FF00FF;
scrollbar-darkshadow-color: #00FFFF;
scrollbar-track-color: #FFFF00;
scrollbar-arrow-color: #000000;}

Answer 3

It works in IE5 to 7. It has been discontinued in IE8. Safari recently gave support for it using different css properties I believe.

There are usability concerns with changing the scrollbar colour.

Answer 4

Please dont change the color of my scrollbar, it's part of the browser chrome, and is already skinned to match my operating system.

Answer 5

Just as others said, the CSS you posted won't work on modern browsers (IE8, Safari, Firefox, etc). Since you're trying to scroll a div, you do, however, have the option of making a custom scrollbar in Javascript/DHTML. A quick Google search reveals a few have done just that like this one: http://www.hesido.com/web.php?page=customscrollbar

Answer 6

I'm trying to change the scrollbar of explorer IE8, but it seems impossible,and not for divs....what can I do?