添加对多个浏览器的 css 支持会删除所有浏览器的样式答案

【问题标题】：Adding css support for multiple browsers removes the style for all the browsers添加对多个浏览器的 css 支持会删除所有浏览器的样式
【发布时间】：2020-06-27 19:55:39
【问题描述】：

问题

我为 chrome 添加了一个发光的滚动条，当我尝试在其他浏览器中添加它时，滚动条样式在 chrome 和所有其他浏览器中被删除

代码

 ::-webkit-scrollbar,
 ::-moz-scrollbar,
 ::-o-scrollbar,
 ::-ms-scrollbar{
    width: 15px;
}

 ::-webkit-scrollbar-thumb,
 ::-moz-scrollbar-thumb,
 ::-o-scrollbar-thumb,
 ::-ms-scrollbar-thumb{
    box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #0004ff, 0 0 30px #0004ff, 0 0 40px #0004ff, 0 0 55px #0004ff, 0 0 75px #0004ff;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
}

 ::-webkit-scrollbar-track,
 ::-moz-scrollbar-track,
    ::-o-scrollbar-track,
    ::-ms-scrollbar-track{
    background: rgb(0, 0, 0);
}

小提琴

https://jsfiddle.net/cr4Lwzyb/1/

【问题讨论】：

标签： html css browser-support

【解决方案1】：

您有单独的每个选择器，因为如果选择器未知，浏览器将忽略整个规则集。

 ::-webkit-scrollbar { width: 15px; }
 ::-moz-scrollbar { width: 15px; }
 ::-o-scrollbar { width: 15px; }
 ::-ms-scrollbar { width: 15px; }

 ::-webkit-scrollbar-thumb {
    box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #0004ff, 0 0 30px #0004ff, 0 0 40px #0004ff, 0 0 55px #0004ff, 0 0 75px #0004ff;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
 }
 ::-moz-scrollbar-thumb {
    box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #0004ff, 0 0 30px #0004ff, 0 0 40px #0004ff, 0 0 55px #0004ff, 0 0 75px #0004ff;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
 }
 ::-o-scrollbar-thumb {
    box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #0004ff, 0 0 30px #0004ff, 0 0 40px #0004ff, 0 0 55px #0004ff, 0 0 75px #0004ff;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
 }
 ::-ms-scrollbar-thumb {
    box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #0004ff, 0 0 30px #0004ff, 0 0 40px #0004ff, 0 0 55px #0004ff, 0 0 75px #0004ff;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
 }

 ::-webkit-scrollbar-track { background: rgb(0, 0, 0); }
 ::-moz-scrollbar-track { background: rgb(0, 0, 0); }
 ::-o-scrollbar-track { background: rgb(0, 0, 0); }
 ::-ms-scrollbar-track { background: rgb(0, 0, 0); }

另外请注意，并非所有浏览器都支持这些样式，无论选择器前缀如何。阅读有关current state of scrollbar styling 的更多信息。

【讨论】：