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 attri

Answer 1

This works, except for the height

Example: http://jsfiddle.net/jasongennaro/gBrNf/

Fairly certain that's because the browser determines the height of the scrollbar based on the height of the content. (More content equals shorter scrollbar... it's a visual cue I am not sure you can override.)

Answer 2

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

Answer 3

You cannot apply height to scrollbars as the browser needs to adjust height based on how much there is to scroll on the page (depending on the height of the page).

You can test it by having content that fits on a single page and by having content that is 3000px in height and see how the scrollbar will lower its size.