1. 程式人生 > >chrome與ie瀏覽器滾動條樣式修改(firefox不支援css修改滾動條樣式)

chrome與ie瀏覽器滾動條樣式修改(firefox不支援css修改滾動條樣式)

1.chrome滾動條樣式修改

#userNavId::-webkit-scrollbar {
         width:10px;
         height:10px;
     }
#userNavId::-webkit-scrollbar-button    {
    /*background-color:#FF7677;*/
}
#userNavId::-webkit-scrollbar-track     {
    background:#394264;
}
#userNavId::-webkit-scrollbar-track-piece {
    background:url(http://www.lyblog.net/wp/wp-content/themes/mine/img/stripes_tiny_08.png);
}
#userNavId::-webkit-scrollbar-thumb{
    background:#9aa1c4;
    border-radius:4px;
}
#userNavId::-webkit-scrollbar-corner {
    background:#82AFFF;
}
#userNavId::-webkit-scrollbar-resizer  {
    background:#FF0BEE;
}

2.ie滾動條樣式修改

#userNavId{
    scrollbar-face-color:#9aa1c4;/*滾動條顏色*/
    scrollbar-highlight-color:#F60;
    scrollbar-3dlight-color:#F00;
    scrollbar-darkshadow-color:#000;
    scrollbar-Shadow-color:#000;
    scrollbar-arrow-color:#394264;/*箭頭顏色*/
    scrollbar-track-color:#394264;/*背景顏色*/
}