如何修改select标签的默认下拉箭头样式？

Posted 2020-10-10 阿宝smile

　　对于一般的项目而言，select标签在浏览器中表现出来的默认样式也不算丑，但是一次项目中，项目经理却要求对select标签本身进行样式修改，美化其下拉小箭头的样式。我思考和尝试了许多方法，最终得到一种能够兼容chrome、360、火狐、搜狗、IE10+等浏览器的最佳方案。废话不多说，实现原理如下：

　　html结构：

1 <div class="box">
2         <select id="choice">
3             <option value="000">请选择</option>
4             <option value="371">河南</option>
5             <option value="372">河北</option>
6         </select>
7         <img src="arrow-3.png" alt="" id="arrow2">
8 </div>
9 <label for="userName">姓名</label><input type="text" placeholder="请输入姓名" id="userName">

　　css样式：

 1 　　.box{
 2         width: 200px;
 3         height: 30px;
 4         border: 1px solid #0f0;
 5         position: relative;
 6         margin-bottom: 100px;
 7     }
 8     #choice{
 9         position: absolute;
10         top: 0;
11         left: 0;
12         z-index: 4;
13         width: 200px;
14         height: 30px;
15         border: 0;
16         /*outline: none;*/
17         
18         appearance: none;  
19         -moz-appearance: none;  
20         -webkit-appearance: none; 
21         background-color: transparent;
22     }
23     select::-ms-expand { 
24         display: none; 
25     }
26     img{
27         width: 30px;
28         height: 20px;
29         position: absolute;
30         top: 5px;
31         right: 0;
32         z-index: 2;
33         transition:all 0.2s;
34     }

　　js代码：

 1 <script src="jquery.js"></script>
 2     <script>
 3 
 4         $("#choice").focus(function(){
 5             $("#arrow2").css({
 6                 transform:"rotate(180deg)"
 7             });
 8         });
 9         $("#choice").blur(function(){
10             $("#arrow2").css({
11                 transform:"rotate(0deg)"
12             });   
13         });
14 
15         $("#choice").on("change",function(){
16             $("#choice").blur();
17             $("#arrow2").css({
18                 transform:"rotate(0deg)"
19             });
20         });
21    
22     </script>

　　好了，本方法还存在一些不完美，欢迎各位小伙伴跟帖补充，我会及时完善博客，助人助己。