Can't apply width and height to -webkit-scrollbar using CSS

Question

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-thumb {
    background-color:#808080;
}

Why do the width and height attributes not work?

Answer 1

width is for vertical scrollbars and height affects horizontal scrollbars. You can't define height for a vertical scrollbar. That is dependent on content size.

If you want to add background images to your scrollbar, they are added like normal elements:

::-webkit-scrollbar {
    width: 50px;
    height: 50px;
    background:-webkit-linear-gradient(0, blue 50%, white 100%);

}

::-webkit-scrollbar-thumb {
    background-color:#808080;
        background:url("http://www.topdesignmag.com/wp-content/uploads/2010/12/137.jpg");
}

Fiddle