修改select下拉箭头样式是前端们共同头疼的问题，目测目前为止基本没有直接修改的方法，要么就是用js纯粹的模拟select，要么就是用一张箭头图片挡住select原本的箭头，但这种方式的不足就是点击图片箭头不会触发select。
残冰想到一个折中的办法，就是把select做成透明的，因为select透明但是下拉的option不透明，根据这个特点，把select做成透明的，然后把一个div放在select层下，然后用一段js获取选中的值赋给div，这样既能显示出样式，点击select也能生效~
以下是部分代码
//jquery赋值代码
$(“#moniselect”).click(function(){
var optionvalue=$(this).find(“option:selected”).text();
$(“.jiantou”).text(optionvalue);
});
//html代码
<select id=”moniselect”>
<option>残冰的代码笔记</option>
<option>宅库女优</option>
<option>oproom</option>
</select></span>
<span class=”jiantou”> 残冰的代码笔记 </span>
//css
select {
width: 80px;
filter:alpha(opacity:0);
opacity: 0;
}
.jiantou {
z-index: -10;
width: 70px;
height: 24px;
background: url(http://localhost:8088/esf/statics/images/select.png) no-repeat center;
background-size: 80px 24px;
margin-left: 0px;
color: #2ABF9E;
font-size: 14px;
padding-left: 10px;
}
未经允许不得转载：前端撸码笔记 » js修改select下拉箭头样式