Question

我想用css更改滚动条设计。我使用这个css但它只适用于chrome，

<style>

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
</style>

告诉我如何使用css在firefox中更改滚动条。

提前致谢

Answer 1

如果你想改变滚动条跨浏览器的风格，你必须使用一些（jQuery）插件。我使用这个http://areaaperta.com/nicescroll/demo.html它是跨浏览器兼容的并且易于实现。

同样很棒的是http://jscrollpane.kelvinluck.com/#examples

在这里你可以找到更多http://www.jqueryrain.com/2012/07/jquery-scrollbar-plugin-examples/

Answer 2

如果你想使用CSS put -moz-intead -webkit-在mozilla中更改它，例如：

-moz-scrollbar {width：12px; }

-webkit-适用于chrome和safari，-moz-适用于firefox，-o-适用于opera，-ms-适用于IE。

似乎你必须把所有4行放在每个浏览器上，例如：

-webkit-scrollbar {width: 12px;}<br/>
-o-scrollbar {width: 12px;}<br/>
-moz-scrollbar {width: 12px;}<br/>
-ms-scrollbar {width: 12px;}<br/>

我想改变滚动条的CSS？

2 个答案: