最近做项目，要求修改select下拉框的默认三角样式，因为它在不同浏览器的样式不同且有点丑，找找网上也没什么详细修改方法，我就总结一下自己的吧。
目标是做成下图效果：
图一：将默认小三角换成红圈的三角图片
图二：点击三角图片，同样实现下拉框选择
1.HTML
<div class="withArrow">
<label for="">类型</label>
<span class="testArrow ">
<span class="defaultVaule">所有分支机构</span>
<select name="depts">
<option value="0">所有分支机构</option>
<option value="1">特定部门</option>
</select>
</span>
</div>
结合html和css，大概是下图的结构：
最外层div（withArrow）包裹一个label和select，在select外包裹一层span（testArrow）,设置testArrow的背景为你想要的三角图片，在select里定位一个span (defaultValue) 放点击选择的option的值。ok~
二、css ( 直接拷贝自项目，有些样式很多余)
1.withArrow
.withArrow{
font-size:; /*清除label和input之间的间距*/
position: relative;
}
2.testArrow
.withArrow .testArrow{
position: relative;
display: inline-block;
vertical-align: middle;
width: 230px;
height: 26px;
right:;
top:;
box-sizing: border-box;
background: url(../images/u1798.png) no-repeat 98% center; /*背景三角图片*/
border: 1px solid rgba(225, 225, 225);
}
3. label
.withArrow label {
display: inline-block;
width: 124px;
vertical-align: middle;
font-size: 14px;
color: #797979;
}
4.select
.withArrow .testArrow select{
appearance:none;
-webkit-appearance: none; /*去除chrome浏览器的默认下拉图片*/
-moz-appearance: none; /*去除Firefox浏览器的默认下拉图片*/
}
.withArrow .testArrow>select{
width: 100%;
height: 26px;
position: absolute;
top:;
left:;
opacity:; /*把select透明化*/
}
5.defaultValue
.withArrow .defaultVaule{
position: absolute;
left:;
top:;
font-size: 14px;
padding-left: 5px;
height:26px;
line-height: 26px;
}
三、js
结合html和css，此时点击背景三角图片时，select下拉列表已经可以出现！革命完成一大半！
但是点击选择option后，输入框还是空白？
因为select设置了透明度为0,有值选中但是看不到，所以需要把选中值赋给定位在select里的span标签存放）。
所以利用事件委托原理，给testArrow绑定click事件。
(下面的写法需引入 jquery )
$('.testArrow').click(function(e){
if(e.target.tagName.toLowerCase()=='select'){
var selectValue= $(e.target).find('option:selected').text();
$(e.target).prev().text(selectValue);
}
})
写这个真累~ O了 ~ 下班啦哈哈