In Css How to change the scrollbar color of the browser?

Question

I tried the following code.But its not working.

html {scrollbar-face-color:#D6D7D6 ;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color:#EFEFEF;
scrollbar-3dlight-color: #FFFFFF;

scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color:  #000000;}

Answer 1

You can use the following attributes for webkit, which reach into the shadow DOM:

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

Here's a working fiddle with a red scrollbar, based on code from this page explaining the issues.

http://jsfiddle.net/hmartiro/Xck2A/1/

Using this and your solution, you can handle all browsers except Firefox, which at this point I think still requires a javascript solution.

Comments

Thanks Man.It's working fine.Good Work..But need to find solution for firefox browser.I will try to find solution for firefox browser.