如何使用css更改滚动条颜色

  • Z时代
  • 2024-01-10
  • 分类：问答

我尝试更改滚动条的颜色，但是在这里它不起作用。

CSS：

.flexcroll {     
    scrollbar-face-color: #367CD2;
    scrollbar-shadow-color: #FFFFFF;
    scrollbar-highlight-color: #FFFFFF;
    scrollbar-3dlight-color: #FFFFFF;
    scrollbar-darkshadow-color: #FFFFFF;
    scrollbar-track-color: #FFFFFF;
    scrollbar-arrow-color: #FFFFFF;
}​

回答：

您可以为webkit使用以下属性，这些属性可以连接到 影子DOM ：

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

这是一个带有红色滚动条的工作小提琴，基于此页面上的代码解释了这些问题。

使用此解决方案和您的解决方案，您可以处理除Firefox之外的所有浏览器，Firefox在这一点上我认为目前仍需要JavaScript解决方案。

以上是 如何使用css更改滚动条颜色 的全部内容， 来源链接： utcz.com/qa/419817.html

回到顶部