CSS滚动条样式跨浏览器[重复]

如何定义跨浏览器的 CSS 滚动条样式？我测试了这段代码，它只在 IE 和 Opera 中有效，但在 Chrome、Safari 和 Firefox 中失败。

<style type="text/css">
<!--    
body {
    scrollbar-face-color: #000000;
    scrollbar-shadow-color: #2D2C4D;
    scrollbar-highlight-color:#7D7E94;
    scrollbar-3dlight-color: #7D7E94;
    scrollbar-darkshadow-color: #2D2C4D;
    scrollbar-track-color: #7D7E94;
    scrollbar-arrow-color: #C1C1D1;
}
-->
</style>

Webkit对滚动条的支持是相当复杂 https://www.webkit.org/blog/363/styling-scrollbars/。这个 CSS 提供了一个非常小的滚动条，带有浅灰色轨道和深色拇指：

::-webkit-scrollbar
{
  width: 12px;  /* for vertical scrollbars */
  height: 12px; /* for horizontal scrollbars */
}

::-webkit-scrollbar-track
{
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb
{
  background: rgba(0, 0, 0, 0.5);
}

这个答案 https://stackoverflow.com/a/14150577/24874是额外信息的绝佳来源。