如何修改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: 0;
        left: 0;
        z-index: 4;
        width: 200px;
        height: 30px;
        border: 0;
        /*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: 0;
        z-index: 2;
        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>

　　好了，本方法還存在一些不完美，歡迎各位小伙伴跟帖補充，我會及時完善博客，助人助己。