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万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章