标签：
自定义样式下拉菜单-1
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title> 自定义样式下拉菜单1 </title> 6 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> 7 <style> 8 body{background:lavender;margin:30px;} 9 .f_group{position:relative;font-size:16px;} 10 .f_group .f_select{width:300px;height:45px;position:absolute;left:0;top:0px;background:#fafafa;border:1px solid #ccc;border-radius:5px;padding:5px 0 5px 10px;box-sizing:border-box;line-height: 30px} 11 .f_group .cur_select{display:inline-block;background:#fafafa url(downselect.png) no-repeat right !important;} 12 .f_group .downselect{opacity:0;filter:alpha(opacity:0;);} 13 </style> 14 </head> 15 <body> 16 <h2>自定义样式下拉菜单1</h2> 17 <div class="f_group"> 18 <span class="f_select cur_select" id="cur-select">星期一</span> 19 <select class="f_select downselect" id="borrowtype"> 20 <option value="1">星期一</option> 21 <option value="2">星期二</option> 22 <option value="3">星期三</option> 23 <option value="4">星期四</option> 24 <option value="5">星期五</option> 25 </select> 26 </div> 27 <script> 28 $(‘#borrowtype‘).on(‘change‘,function(){ 29 $(‘#cur-select‘).html($(‘#borrowtype option:selected‘).text()); 30 }); 31 </script> 32 </body> 33 </html>
自定义样式下拉菜单-2
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>自定义样式下拉菜单2</title> 6 <style> 7 body{background:lavender;margin:30px;} 8 .styled-select select { 9 background: transparent; 10 width: 268px; 11 padding: 5px; 12 font-size: 16px; 13 border: 1px solid #ccc; 14 height: 34px; 15 -webkit-appearance: none; /*for chrome*/ 16 } 17 .styled-select { 18 border:1px solid #333; 19 width: 240px; 20 height: 34px; 21 overflow: hidden; 22 background: url(new_arrow.jpg) no-repeat right #ddd; 23 } 24 </style> 25 </head> 26 <body> 27 <h2>自定义样式下拉菜单2</h2> 28 <div class="styled-select"> 29 <select> 30 <option>Here is the first option</option> 31 <option>The second option</option> 32 </select> 33 </div> 34 <script> 35 </script> 36 </body> 37 </html>
总结：个人觉得第一种方法较好。
标签：
原文地址：http://www.cnblogs.com/k11590823/p/4661665.html
