body{
scrollbar-arrow-
color
:
red
;
/*上下按鈕上三角箭頭的顏色*/
scrollbar-face-
color
:
#CBCBCB
;
/*滾動條凸出部分的顏色*/
scrollbar
-3
dlight-
color
:
blue
;
/*滾動條亮邊的顏色*/
scrollbar-highlight-
color
:
#333
;
/*滾動條空白部分的顏色*/
scrollbar-shadow-
color
: yellow;
/*滾動條陰影的顏色*/
scrollbar-darkshadow-
color
:
green
;
/*滾動條強陰影的顏色*/
scrollbar-track-
color
:
#eee
;
/*滾動條背景顏色*/
scrollbar-base-
color
:
black
;
/*滾動條的基本顏色*/
Cursor:
url
(mouse.cur);
/*自定義個性鼠標*/
/*以上2項適用與：body、div、textarea、iframe*/
}
::-webkit-scrollbar {
/* 滾動條整體部分 */
width
:
10px
;
margin-right
:
2px
}
::-webkit-scrollbar-button {
/* 滾動條兩端的按鈕 */
width
:
10px
;
background-color
: yellow;
}
::-webkit-scrollbar:horizontal {
height
:
10px
;
margin-bottom
:
2px
}
::-webkit-scrollbar-track {
/* 外層軌道 */
border-radius:
10px
;
}
::-webkit-scrollbar-track-piece {
/*內層軌道，滾動條中間部分 */
background-color
:
#333333
;
border-radius:
10px
;
}
::-webkit-scrollbar-thumb {
/* 滑塊 */
width
:
10px
;
border-radius:
5px
;
background
:
#CBCBCB
;
}
::-webkit-scrollbar-corner {
/* 邊角 */
width
:
10px
;
background-color
:
red
;
}
::-webkit-scrollbar-thumb:hover {
/* 鼠標移入滑塊 */
background
:
#909090
;
}
.demo {
width
:
400px
;
height
:
200px
;
overflow
:
auto
;
}