How to change the scrollbar color using css [duplicate]

Question

My jsfiddle is here
I trying to change the color of the scrollbar but here it is not working.

Css:

.flexcroll {          scrollbar-face-color: #367CD2;     scrollbar-shadow-color: #FFFFFF;     scrollbar-highlight-color: #FFFFFF;     scrollbar-3dlight-color: #FFFFFF;     scrollbar-darkshadow-color: #FFFFFF;     scrollbar-track-color: #FFFFFF;     scrollbar-arrow-color: #FFFFFF; }​ 

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.

Answer 2

Your css will only work in IE browser. And the css suggessted by hayk.mart will olny work in webkit browsers. And by using different css hacks you can't style your browsers scroll bars with a same result.

So, it is better to use a jQuery/Javascript plugin to achieve a cross browser solution with a same result.

Solution:

By Using jScrollPane a jQuery plugin, you can achieve a cross browser solution

See This Demo