对于一般的项目而言，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>
好了，本方法还存在一些不完美，欢迎各位小伙伴跟帖补充，我会及时完善博客，助人助己。
原文：http://www.cnblogs.com/ls99/p/7643299.html