how can i change the style of scroll bar


Problem :

I have a css code likes

        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 ?

Solution :

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


::-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); 


    CSS Howto..

    How do CSS grid systems save time when implementing designs that aren’t grid-based?

    How can I get jQuery to toggle a class with fadeToggle?

    How to get css height property of an object and add 20px to it?

    How to tooltip keep active using HTML and CSS or Jquery?

    What is the best way to store css data inside database and call it similar to how a css file would be

    How do you position div's in html5? [closed]

    How to change background [closed]

    the tab's content shows abnormal under IE7

    How to create a layout with 2 menu bars in css?

    How does a browser determine which cursor to use if multiple are set via CSS?

    show one div but hide all other divs is not working

    How To Adjust CSS List On Hover Image

    How to place the block on the top of “second” screen using CSS?

    How to align horizontally list if there is a sublist css

    How to make this table's height equal to the middle td's height

    How to position a background image like

    How to create donut chart in pure css & svg

    Show X inside the body tag of a php file in case the screen size is smaller than Y

    How to add a css class programmatically to a piece of code?

    Basic concept for how javascript replaces an html input with something interactive?

    How do I center a set of JQuery Mobile radio buttons in the viewport?

    How to make divs that automatically wrap to the next row

    Divs showing and then hiding on page load

    How to add padding to the cells of a table with CSS [closed]

    How to get a gravity effect in a CSS animation?

    How to decrease CSS opacity

    How do I make text and other items look like chalk without a specialized font using only HTML and CSS? [closed]

    How to merge CSS classes?

    jQuery: How to check if an element exists and change css property

    Html, table, img & css - how to get text to wrap correctly?