在所有浏览器中更改滚动条的颜色 [英] Change color of Scrollbar in all browsers

问题描述

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

#boxes-list::-webkit-scrollbar-track{-webkit-box-shadow: 插入 0 0 6px rgba(0,0,0,0.3);边框半径:10px；背景色:#F5F5F5；}#boxes-list::-webkit-scrollbar{宽度:12px；背景色:#F5F5F5！重要；}#boxes-list::-webkit-scrollbar-thumb{边框半径:10px；-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3)!important;背景颜色:#FFCC00！重要；}

解决方案

尝试

/* 适用于 Firefox */* {滚动条宽度:18px；/*细；*/滚动条颜色:天蓝色#000066；}*::-webkit-scrollbar {宽度:18px；}*::-webkit-scrollbar-track {背景:#000066；/* 跟踪区域的颜色 */}*::-webkit-scrollbar-thumb {背景颜色:天蓝色；/* 滚动拇指的颜色 */边框半径:1px；/* 滚动拇指的圆度 *//* 边框:1px 实心 #000066;*//* 在滚动块周围创建填充 */}

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

解决方案

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>

这篇关于在所有浏览器中更改滚动条的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！