customizing vertical scrollbar with css/jquery

I have a div as <div id="content"> with some <p> tags within it. I am setting the style for div as follows:

#content{
     height:200px;
     overflow-y:scroll;
}

Is th开发者_JAVA百科ere a way I can customize the scrollbar. I mean I want to change the scrollbar color as well as its background.

There is no valid cross-browser code, which is capable of coloring the scrollbars. You should respect the UI configuration of the users who are visiting your page.

Maybe you want to have jQuery scrollbars, which are fully customizable: http://www.net-kit.com/jquery-custom-scrollbar-plugins/

Scrollbars are generated through the OS and you have little control over them.

It's why people have made custom scrollbar, generated in javascript.

There are a lot of ressource for the little customizing you can do, just google it.

IIRC, you can only modify IE scrollbars via stuff like

scrollbar-3dlight-color:#ffd700;
scrollbar-arrow-color:#ff0;
scrollbar-base-color:#ff6347;
scrollbar-darkshadow-color:#ffa500;
scrollbar-face-color:#008080;
scrollbar-highlight-color:#ff69b4;
scrollbar-shadow-color:#f0f;