About css: scrollbar-face-color only supports ie solutions

Today someone suddenly asked me how to customize the scroll bar CSS. I found that scrollbar-base-color is only supported by IE. I checked the information for a long time and summarized it as follows! ! !

Customized scroll bar style 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; }

Explanation:
Introduce the content of the style sheet involving the browser scroll bar (some styles require Only supported by ie5.5+):
1． Settings when the overflow content overflows (setting whether the set object displays scroll bars)
overflow-xSettings when the content overflows in the horizontal direction
overflow-yVertical direction Settings when content overflows
The values set for the above three attributes are visible (default value), scroll, hidden, and auto.

2. scrollbar-3d-light-color The color of the bright edge of the three-dimensional scroll bar (set the color of the scroll bar)
scrollbar-arrow-color The color of the triangular arrows on the up and down buttons
scrollbar-base-color The basic color of the scroll bar
scrollbar-dark-shadow-colorThe color of the strong shadow of the three-dimensional scroll bar
scrollbar-face-colorThe color of the protruding part of the three-dimensional scroll bar
scrollbar-highlight-colorThe color of the blank part of the scroll bar
scrollbar -shadow-color The color of the three-dimensional scroll bar shadow

Customized scroll bar style 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;}

Explanation:

::-webkit-scrollbar 滚动条宽跟高 ::-webkit-scrollbar-track-piece 滚动条样式底部内层样式 ::-webkit-scrollbar-thumb 滚动条滑块样式 -webkit-border-radius: 滚动条滑块边角–导圆角

Customized scroll bar under FireFox:

/* 滚动条颜色 */ scrollbar { -moz-appearance: none !important; background: rgb(0,255,0) !important; } /* 滚动条按钮颜色 */ thumb,scrollbarbutton { -moz-appearance: none !important; background-color: rgb(0,0,255) !important; } /* 鼠标悬停时按钮颜色 */ thumb:hover,scrollbarbutton:hover { -moz-appearance: none !important; background-color: rgb(255,0,0) !important; } /* 隐藏上下箭头 */ scrollbarbutton { display: none !important; } /* 纵向滚动条宽度 */ scrollbar[orient="vertical"] { min-width: 15px !important; } }

Use JS to implement custom scroll bars under FF:

JS

   HTML 
内容

The above is the detailed content of About css: scrollbar-face-color only supports ie solutions. For more information, please follow other related articles on the PHP Chinese website!