Question

我想在所有浏览器中更改滚动条的颜色。我的以下风格在Mozila中不起作用所以请帮助我如何在所有浏览器中更改滚动条的颜色。

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

Answer 1

试试

email

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

Answer 2

-webkit-仅适用于基于WebKit（Chrome / Safari）的浏览器。要支持mozilla和opera，您必须另外使用前缀-moz和-o-

就像那样：

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

等等..

在所有浏览器中更改滚动条的颜色

2 个答案: