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

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

尝试

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

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

等等 ..