<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css select</title> <style type="text/css"> .sel_wrap{height:40px;background:#fff url(http://caibaojian.com/demo/2014/12/img/icons.png) no-repeat right -24px; color: #a1a1a1; font-size: 16px; border:1px solid #E4E4E4;cursor:pointer;position:relative;_filter:alpha(opacity=0); } .sel_wrap label{padding-left:10px;font-size:16px;z-index:2; color: #a1a1a1; line-height: 40px; height: 40px; display: block;} .sel_wrap .select{width:100%; height:40px; line-height:40px; z-index:4;position:absolute;top:0;left:0;margin:0;padding:0;opacity:0; *margin-top:12px; filter:alpha(opacity=0);cursor:pointer; font-size: 16px;} </style> </head> <body> <div class="sel_wrap"> <label>请选择您所在的城市</label> <select class="select" name="" id="c_city"> <option value="0">请选择您所在的城市</option> <option value="1">中山市</option> <option value="2">太原市</option> <option value="3">广州市</option> </select> </div> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> $(".sel_wrap").on("change", function() { var o; var opt = $(this).find('option'); opt.each(function(i) { if (opt[i].selected == true) { o = opt[i].innerHTML; } }) $(this).find('label').html(o); }).trigger('change'); </script> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » css select 喜欢 (0)or分享 (0)
