Css3 / webkit: how do I change the size of the scroll bar slider?

Question

fiddle: http://jsfiddle.net/vVJGD/

::-webkit-scrollbar{
    width: 10px;
    padding-top: 40px;
}

::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
    border: 1px solid black;
    background: rgb(41,41,41);
    border-radius: 10px;

}
::-webkit-scrollbar-thumb{
    border-radius:10px;
    height: 30px;
    width: 8px;
    border: 1px solid black;
    background: rgb(111,111,111);
    -webkit-box-shadow: 0 1px 1px rgb(0,0,0);
    background: -webkit-linear-gradient(rgb(200,200,200), rgb(150,150,150));
}

::-webkit-scrollbar-track-piece {
    height: 30px;
}

I've tried to set the height via track-piece and thumb, but I don't think that's the correct way.

Anyone know the secret? I didn't find anything on google this specific.

Answer 1

Set the height and width properties: http://jsfiddle.net/vVJGD/8/, Webkit will assign them to the appropriate orientation.