Cómo cambiar el color de la barra de desplazamiento usando css

Mi jsfiddle está aquí
Estoy tratando de cambiar el color de la barra de desplazamiento, pero aquí no está funcionando.

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; }​ 

Puede usar los siguientes atributos para webkit, que llegan al DOM sombreado :

 ::-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 */ } 

Aquí hay un violín que funciona con una barra de desplazamiento roja, basado en el código de esta página que explica los problemas.

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

Usando esto y su solución, puede manejar todos los navegadores excepto Firefox, que en este punto creo que todavía requiere una solución de javascript.

Tu css solo funcionará en el navegador IE. Y la CSS sugerida por hayk.mart funcionará en navegadores webkit. Y al usar diferentes hacks de css, no puedes personalizar las barras de desplazamiento de tu navegador con el mismo resultado.

Por lo tanto, es mejor usar un complemento jQuery / Javascript para lograr una solución de navegador cruzado con el mismo resultado.

Solución:

Al utilizar jScrollPane un plugin jQuery, puede lograr una solución de navegador cruzado

Vea esta demostración