select下拉框默認箭頭怎么去掉？

前言

最近有一個小需求，去掉select默認顯示的下箭頭圖標，然后自定義一個下箭頭圖標，

最右邊是select自帶的箭頭，旁邊黑色箭頭為自定義，使用的字體圖標

解決方法

給select加上 appearance:none; 即可

-webkit-appearance:none;

-moz-appearance:none;

appearance:none;

 

注：如果是用背景圖方式插入圖標，可以用下面2種方式：

background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;

background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll 100% 45%;

參考原文

 

有需要的朋友可以領取支付寶到店紅包，能省一點是一點