3

i want to change my scrollbar design using css. i use this css but it only apply on chrome,

<style>

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
</style>

tell me how can i change my scrollbar in firefox using css.

thanks in advance

Ankit Agrawal
  • 6,034
  • 6
  • 25
  • 49

2 Answers2

7

If you want to change style of scrollbar cross-browser you have to use some (jQuery) plugin. I use this one http://areaaperta.com/nicescroll/demo.html it is cross-browser compatible and easy to implement.

Also great one is this http://jscrollpane.kelvinluck.com/#examples

And here you can find more http://www.jqueryrain.com/2012/07/jquery-scrollbar-plugin-examples/

Michal
  • 3,584
  • 9
  • 47
  • 74
-2

If you want to change it in mozilla using CSS put -moz- intead of -webkit-, e.g:

-moz-scrollbar { width: 12px; }

-webkit- works for chrome and safari, -moz- for firefox, -o- for opera, and -ms- for IE.

It seems you have to put all 4 lines to make it work on every browser, e.g:

-webkit-scrollbar {width: 12px;}<br/>
-o-scrollbar {width: 12px;}<br/>
-moz-scrollbar {width: 12px;}<br/>
-ms-scrollbar {width: 12px;}<br/>
Ivel
  • 1