webkit scrollbar for my new tumblr theme
つくりかけ
http://www.webkit.org/blog/363/styling-scrollbars/
HTML
<div class="sb">
<div></div>
</div>
<div class="sb resizable">
<div></div>
</div>
CSS
html{height:100%}body{height:150%}.sb{height:150px;width:300px;overflow:scroll;margin:1.5em }.sb>div{height:300px;width:1000px}.resizable{resize:both}
::-webkit-scrollbar { height:16px; width:16px; }
/*
NG
::-webkit-scrollbar:hover > ::-webkit-scrollbar-track{ background: #fff; ]
*/
::-webkit-scrollbar-button {
background:#000;
box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #fff;
}
::-webkit-scrollbar-button:decrement{}
::-webkit-scrollbar-button:increment{}
::-webkit-scrollbar-button:decrement:hover{background:#93c}
::-webkit-scrollbar-button:horizontal:decrement{}
::-webkit-scrollbar-button:horizontal:increment{}
::-webkit-scrollbar-button:vertical:decrement{}
::-webkit-scrollbar-button:vertical:increment{}
::-webkit-scrollbar-track { border: 1px solid #000; background: #000; }
::-webkit-scrollbar-track:horizontal { }
::-webkit-scrollbar-track:vertical {}
::-webkit-scrollbar-track:hover,
::-webkit-scrollbar-track:active { background:#fff; }
::-webkit-scrollbar-track:horizontal:hover,
::-webkit-scrollbar-track:horizontal:active { }
::-webkit-scrollbar-track:vertical:hover,
::-webkit-scrollbar-track:vertical:active { }
::-webkit-scrollbar-thumb {
box-sizing: padding-box;
background:#000;
min-height: 16px;
box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #fff;
}
::-webkit-scrollbar-thumb:horizontal { }
::-webkit-scrollbar-thumb:vertical { }
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active { background: deeppink; }
::-webkit-scrollbar-track-piece { }
::-webkit-scrollbar-track-piece:horizontal { }
::-webkit-scrollbar-track-piece:vertical { }
-webkit-scrollbar-corner { background-color: #000; }