将webkit滚动条样式应用于指定的元素

我是以双冒号为前缀的伪元素。 我遇到了一篇博客文章，讨论使用一些webkit的css滚动条样式。 伪元素CSS可以应用于单个元素吗？

/* This works by applying style to all scroll bars in window */ ::-webkit-scrollbar { width: 12px; } /* This does not apply the scrollbar to anything */ div ::-webkit-scrollbar { width: 12px; } 

在这个小提琴中，我想使div的滚动条自定义，但主窗口的滚动条保持默认。

http://jsfiddle.net/mrtsherman/4xMUB/1/

Answer 1

你的想法是正确的。 然而，注意div ::-webkit-scrollbar与div后的空格实际上是相同的div *::-webkit-scrollbar ; 这个select器意味着“任何元素在<div>内的滚动条”。 使用div::-webkit-scrollbar 。

在http://jsfiddle.net/4xMUB/2/上查看演示;

Answer 2

我想使用类select器来使用自定义滚动条。

不知何故.foo::-webkit不工作，但我知道div.foo::-webkit工作！ 那些## $$ * ##伪事物….

见http://jsfiddle.net/QcqBM/16/

Answer 3

您也可以通过元素的id应用这些规则。 假设一个div的滚动条必须被设置为id为“myDivId”的样式。 那么你可以做下面的事情。 这样你可以对不同元素的滚动条使用不同的样式。

 #myDivId::-webkit-scrollbar { width: 12px; } #myDivId::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; } #myDivId::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } 

http://jsfiddle.net/QcqBM/516/