Change size of scrollbar thumb with CSS

Question

I want to get a scrollbar with a thumb larger than the track. I can change the color, the opacity, everything, but I don\'t know how to change the size of the thumbs and the

Answer 1

This is a really old post, but I have a working solution that does 'EXACTLY' what was asked for. Also, this will come in handy for anybody else needing this solution.

Fiddle

/* SCROLLBAR */
/* Let's get this party started */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: rgb(0,0,0);
    border: 4px solid transparent;
    background-clip: content-box;   /* THIS IS IMPORTANT */
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgb(25,25,25);
    border: 1px solid rgb(0,0,0);
}

It is very important to set background-clip: content-box for this to work. You will be left with a track that is thinner than the scroll-bar-thumb. Cheers!!