最近做项目，要求修改select下拉框的默认三角样式，因为它在不同浏览器的样式不同且有点丑，找找网上也没什么详细修改方法，我就总结一下自己的吧。

目标是做成下图效果：

图一：将默认小三角换成红圈的三角图片 

图二：点击三角图片，同样实现下拉框选择 

 

1.HTML

 1 <div class="withArrow">
 2      <label for="">类型</label>
 4      <span class="testArrow ">
 5            <span class="defaultVaule">所有分支机构</span>
 6            <select name="depts">
 7                <option value="所有分支机构">所有分支机构</option>
 8                <option value="特定部门">特定部门</option>
 9            </select>
10      </span>                        
11 </div>

 结合html和css，大概是下图的结构：

　　最外层div（withArrow）包裹一个label和select，在select外包裹一层span（testArrow）,设置testArrow的背景为你想要的三角图片，在select里定位一个span (defaultValue) 放点击选择的option的值。ok~

 

二、css ( 直接拷贝自项目，有些样式很多余)

　　1.withArrow

 

.withArrow{
    font-size: 0; /*清除label和input之间的间距*/
　  position: relative;

}

 

　　2.testArrow 

 

 .withArrow .testArrow{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 230px;
    height: 26px;
    right:0;
    top:0;    
    box-sizing: border-box;
    background: url(../images/u1798.png) no-repeat 207px 2px; /*背景三角图片*/
    border: 1px solid rgba(225, 225, 225);
    
}

 

 

　　3. label

1 .withArrow label {
2       display: inline-block;
3       width: 124px;
4       vertical-align: middle;
5       font-size: 14px;
6       color: #797979;
7 }

 　　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: 0;
    left: 0;
    opacity: 0; /*把select透明化*/
}

　　5.defaultValue

.withArrow .defaultVaule{
    position: absolute;
    left:0;
    top:0;
    font-size: 14px;
    padding-left: 5px;
    height:26px;
    line-height: 26px;
}

三、js

　　当点击背景三角图片时，select下拉列表是不会出现的（点击select其他位置可以），需要设置事件，所以利用事件委托原理，给testArrow绑定click事件aaa。

　　(下面的写法需引入 jquery )

aaa:function(e){
    if(e.target.tagName.toLowerCase()=='select'){
         var selectValue= $(e.target).val();  //获取选中的option的值
         $(e.target).prev().text(selectValue); //把值赋给span（defaultValue）
     }
}

 写这个真累~ O了 ~ 下班啦哈哈

版权声明：本文为anyxl原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/anyxl/p/9118298.html