如何通过纯 Css 更改默认的 Firefox 滚动条颜色 [重复]

【问题标题】：How to change the default Firefox scrollbar color via pure Css [duplicate]如何通过纯 Css 更改默认的 Firefox 滚动条颜色 [重复]
【发布时间】：2020-04-08 06:10:39
【问题描述】：

我听到有人说“这不可能”。但我不相信所谓的不可能。因此，这是通过纯 CSS 更改默认 Firefox 滚动条颜色的最佳方法。

【问题讨论】：

重复Scrollbar color change in Firefox
您发布了your answer to that old question，然后提出并回答了另一个问题......虽然自我回答的问题很好，但这并不意味着您应该创建新的副本
你好@DavidW。是的，但我想澄清一下并将其添加为每个寻找该解决方案的人的参考（而不是将其视为子答案）。感谢理解。
@DavidW 您可以删除另一个答案并保留这个答案（如果可能）。谢谢。
我无法删除其他答案。如果你愿意，你可以（下面有一个链接），但我建议你不要这样做——这看起来是一个有用的答案。我不是 CSS 和 Firefox 方面的专家，但我认为这个问题已经足够接近，应该将其作为副本关闭。如果您不同意争论您的案件的地方是 meta.stackoverflow.com 或可能是 CSS/HTML chat 以获得专家意见（尽管看起来没有人在那里）

标签： css firefox scrollbar

【解决方案1】：

在以下示例中，我只想对主侧边栏中的<ul> 列表进行样式化。只需为 Firefox 滚动条样式尝试此解决方案：

<div class="parent">
<div class="sidebar">
<ul class="scrollable">
<li></li>
</ul>
</div>
</div>

CSS 将是：

.scrollable {
overflow: auto;
max-height:80vh;
overflow-y: scroll;
scrollbar-color: #0A4C95 #C2D2E4;
}

.scrollable::-webkit-scrollbar {
width: 0.5em!important;
}

.scrollable::-webkit-scrollbar-track-piece {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
}

.scrollable::-webkit-scrollbar-thumb:vertical {
background-color: #ddd;
outline: 1px solid slategrey;
}

以下是最终结果：

（注意：第一张图片是默认的滚动条颜色）。

【讨论】：