首页 > 建站教程 > Div+Css >  css修改原生select的下拉箭头正文

css修改原生select的下拉箭头

css如果要修改原生的select,首先需要将原生的下拉箭头去除,然后给selec一个箭头效果的背景图片即可实现:

select {
/*将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*在选择框的最右侧中间显示小箭头图片*/
background: url(../img/ico-arrow.png) no-repeat scroll right center transparent;
}
/*清除ie的默认选择框样式清除,隐藏下拉箭头*/
select::-ms-expand {
display: none;
}


最终效果图:

1.png