Skip to content Skip to sidebar Skip to footer

Change Color Of Scrollbar In All Browsers

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::-

Solution 1:

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 */
}
<divstyle="width:100%;height:300vh;overflow:hidden;"></div>

Solution 2:

-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 006pxrgba(0,0,0,0.3);
    -webkit-box-shadow: inset 006pxrgba(0,0,0,0.3);
    -moz-box-shadow: inset 006pxrgba(0,0,0,0.3);
    -o-box-shadow: inset 006pxrgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

And so on ..

Post a Comment for "Change Color Of Scrollbar In All Browsers"