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

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

　　html结构：

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

　　css样式：

 　　.box{
         width: 200px;
         height: 30px;
         border: 1px solid #0f0;
         position: relative;
         margin-bottom: 100px;
     }
     #choice{
         position: absolute;
         top:;
         left:;
         z-index:;
         width: 200px;
         height: 30px;
         border:;
         /*outline: none;*/

         appearance: none;
         -moz-appearance: none;
         -webkit-appearance: none;
         background-color: transparent;
     }
     select::-ms-expand {
         display: none;
     }
     img{
         width: 30px;
         height: 20px;
         position: absolute;
         top: 5px;
         right:;
         z-index:;
         transition:all 0.2s;
     }

　　js代码：

 <script src="jquery.js"></script>
     <script>

         $("#choice").focus(function(){
             $("#arrow2").css({
                 transform:"rotate(180deg)"
             });
         });
         $("#choice").blur(function(){
             $("#arrow2").css({
                 transform:"rotate(0deg)"
             });
         });

         $("#choice").on("change",function(){
             $("#choice").blur();
             $("#arrow2").css({
                 transform:"rotate(0deg)"
             });
         });

     </script>

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