1. 程式人生 > >修改瀏覽器滾動條樣式

修改瀏覽器滾動條樣式

htm 火狐瀏覽器 kit 圖片 圓角 inset 默認 火狐 row

滾動條樣式修改,沒有找到修改火狐瀏覽器滾動條的代碼

把以下樣式加入css,圖片為谷歌、safari、qq瀏覽器、360瀏覽器滾動條樣式和ie滾動條樣式及ie原始默認樣式

/*谷歌、safari、qq瀏覽器、360瀏覽器滾動條樣式*/
/*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/
::-webkit-scrollbar
{
width: 10px;
height: 10px;
background-color: #F5F5F5;
}
/*定義滾動條軌道 內陰影+圓角*/
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
/*定義滑塊 內陰影+圓角*/
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #bdbdbd;
}
/*滑塊效果*/
::-webkit-scrollbar-thumb:hover
{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.4);
}
/*IE滾動條顏色*/
html {
scrollbar-face-color:#bfbfbf;/*滾動條顏色*/
scrollbar-highlight-color:#000;
scrollbar-3dlight-color:#000;
scrollbar-darkshadow-color:#000;
scrollbar-Shadow-color:#adadad;/*滑塊邊色*/
scrollbar-arrow-color:rgba(0,0,0,0.4);/*箭頭顏色*/
scrollbar-track-color:#eeeeee;/*背景顏色*/
}

修改瀏覽器滾動條樣式