2

I want to change color of scroll bar in all browser. My below style is not working in Mozila so please help me how to change color of the scroll bar in all browsers.

#boxes-list::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

#boxes-list::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5!important;
}

#boxes-list::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3)!important;
    background-color: #FFCC00!important;
}
tobspr
  • 8,200
  • 5
  • 33
  • 46
iKambad
  • 351
  • 1
  • 2
  • 13
  • possible duplicate of [CSS customized scroll bar in div](http://stackoverflow.com/questions/9251354/css-customized-scroll-bar-in-div) – Chris J Aug 22 '13 at 14:45

2 Answers2

11

Try

/* Works on Firefox */
* {
  scrollbar-width: 18px;/*thin;*/
  scrollbar-color: skyblue #000066;
}
*::-webkit-scrollbar {
  width: 18px;
}

*::-webkit-scrollbar-track {
  background: #000066;        /* color of the tracking area */
}

*::-webkit-scrollbar-thumb {
  background-color: skyblue;    /* color of the scroll thumb */
  border-radius: 1px;       /* roundness of the scroll thumb */
 /* border: 1px solid #000066;  *//* creates padding around scroll thumb */
}
<div style="width:100%;height:300vh;overflow:hidden;">

</div>
Waruna Manjula
  • 3,067
  • 1
  • 34
  • 33
4

-webkit- is a prefix only for browsers based on WebKit (Chrome / Safari). To support mozilla and opera, you would have to additionally use the prefix -moz and -o-

Like that:

#boxes-list::-webkit-scrollbar-track, 
#boxes-list::-moz-scrollbar-track, 
#boxes-list::-o-scrollbar-track
{
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -o-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

And so on ..

tobspr
  • 8,200
  • 5
  • 33
  • 46