About Css:scrollbar-face-color only support IE solution

Today suddenly someone asked me to scroll bar CSS custom method, I found that with Scrollbar-base-color this method only IE support, check a half-day data summarized as follows!!!

Custom scroll bar styles in IE browser:

HTML {   scrollbar-base-color: #C0C0C0;   Scrollbar-base-color: #C0C0C0;   Scrollbar-3dlight-color: #C0C0C0;   Scrollbar-highlight-color: #C0C0C0;   Scrollbar-track-color: #EBEBEB;   Scrollbar-arrow-color:black;   Scrollbar-shadow-color: #C0C0C0;   Scrollbar-dark-shadow-color: #C0C0C0;   }

Explain:
Describe the content of the stylesheet that involves the browser scroll bar (some styles need to be ie5.5+ to support):
1. Overflow settings when content overflows (sets whether the object is set to show scroll bars)
Overflow-x settings when the content overflows horizontally
Overflow-y settings for vertical content overflow
The values for the above three properties are visible (default), scroll, hidden, auto.

2. Scrollbar-3d-light-color color of the solid scrollbar (sets the color of the scroll bar)
Scrollbar-arrow-color the color of the triangular arrows on the top and bottom buttons
Scrollbar-base-color basic color of scroll bars
Scrollbar-dark-shadow-color the color of the strong shadow of a solid scroll bar
Scrollbar-face-color color of the protruding portion of a solid scrollbar
Scrollbar-highlight-color the color of the blank part of the scroll bar
Scrollbar-shadow-color color of a solid scrollbar shadow

Custom scroll bar styles in Chrome browser:

::-webkit-scrollbar {width:3px; height:3px;}   ::-webkit-scrollbar-track-piece {background-color: #ffffff;}   ::-webkit-scrollbar-thumb{height:50px; Background-color: #666;-webkit-border-radius:3px;}

Explain:

::-webkit-scrollbar ScrollBar width Heel height::-webkit-scrollbar-track-piece scrollbar style bottom inner layer style::-webkit-scrollbar-thumb scrollbar Slider Style- Webkit-border-radius: ScrollBar Slider Corner – Guide Fillet

Firefox Custom scroll bar:

/* scroll bar color */  scrollbar {      -moz-appearance:none!important;      Background:rgb (0,255,0)!important;   }   /* scroll bar button color */  Thumb,scrollbarbutton {      -moz-appearance:none!important;      Background-color:rgb (0,0,255)!important;   }   /* button color on mouse hover */    thumb:hover,scrollbarbutton:hover {      -moz-appearance:none!important;      Background-color:rgb (255,0,0)!important;   }   /* Hide up/down arrows */  Scrollbarbutton {      display:none!important;   }   /* Longitudinal scrollbar width */  scrollbar[orient= "vertical"] {     min-width:15px!important;   }   }

FF implementation of the custom scroll bar with JS:

Js

<script type= "Text/javascript" src= "Jquery-1.1.3.1.js" ></script> <script type= "Text/javascript" src= "jquery.linscroll.js" ></script> <script type= "Text/javascript" > $ (document). Ready (function () {$ (' #scrollContent '). Setscroll (//scrollcontent is the ID of the rolling layer {img:scroll_bk.gif ', wid    th:10},//background map and its width {img:scroll_arrow_up.gif ', height:3},//up image {img:scroll_arrow_down.gif ', Height:3},//down image      {img:scroll_bar.gif ', height:25}//bar image);}); </script> HTML <div id= "scrollcontent" style= "width:140px;overflow:hidden;height:170px;" > Content </div>