js修改select下拉箭头样式

修改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下拉箭头样式

上一篇:

下一篇: