如何修改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>

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

巴特西

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

最新文章

热门文章