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

Question

问题

我为 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);
}

fiddle

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

Answer 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.

的更多信息

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

Adding css support for multiple browsers removes the style for all the browsers

html

css

browser-support