how can i change the style of scroll bar

Question

I have a css code likes

  .scrollPanel
    {
        height: 100px;
        width: auto;
        position: absolute;
        overflow: scroll;
    }

You can see my example Here ! What I want to know is how to change the style of scroll bar ?
How can I set css style to it ?

Answer 1

As of now there's no cross browser solution to change the scroll bars with CSS ONLY, alternatively you can use jQuery to style them.

Solution for webkit browsers only

Demo

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

Credits