css一些兼容問題

1、下拉框樣式
/*清除ie的默認選擇框樣式清除,隱藏下拉箭頭*/
select::-ms-expand { display: none; }


//清除火狐和谷歌下的默認下拉三角,加上自己想要的背景圖片
select{
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-progress-appearance: none;
    appearance: none;
    border: 1px solid #ddd;
    background:#fff url("../../public/img/droDown-mark01.svg" ) no-repeat 97.5% center;
    background-size: 12px;
}

2、滾動條樣式(自定義)

/*自定義滾動條*/
.navDiv::-webkit-scrollbar-track-piece{
	background-color:transparent;
}
::-webkit-scrollbar-track-piece{
	background-color:#fff;
}
::-webkit-scrollbar{ 
width:6px;/*滾動條的寬度*/ 
height:6px;/*滾動條的高度*/ 
} 
::-webkit-scrollbar-thumb{/*滾動條的樣式*//* height:50px; *//* background-color:#c8c8c8; *//* -webkit-border-radius:4px; *//* border:2px solid; *//* border-color:rgba(255,255,255,0.1); */} 
::-webkit-scrollbar-thumb:hover{/*滾動條的hover樣式*/ 
height:50px; 
background-color:rgba(164,164,164,1); 
-webkit-border-radius:4px; 
}
.navDiv::-webkit-scrollbar-thumb{/*滾動條的樣式*/ 
height:50px; 
background-color:rgba(228,228,228,0.7); 
-webkit-border-radius:4px; 
border:2px solid;
border-color:rgba(255,255,255,0.1);
} 
.navDiv::-webkit-scrollbar-thumb:hover{/*滾動條的hover樣式*/ 
height:50px; 
background-color:rgba(228,228,228,1); 
-webkit-border-radius:4px; 
}


發佈了50 篇原創文章 · 獲贊 10 · 訪問量 10萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章