CSS select Style Optimization including jquery code, cssjquery

CSS select Style Optimization including jquery code, cssjquery

The basic CSS style of the CSS drop-down menu is not very nice. Some simple style optimizations can be used to obtain the following results:

The html structure is as follows:

<Div class = "sel_wrap"> <label> select your city </label> <select class = "select" name = "" id = "c_city"> <option value = "0"> select your city </option> <option value = "1"> Zhongshan City </option> <option value = "2"> Taiyuan City </ option> <option value = "3"> Guangzhou </option> </select> </div>

 

Css style:

.sel_wrap{height:40px;background:#fff url(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;}

 

Jquery code:

$(".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);});

Here is just a method. Of course, it has already been written in the previous article that uses css3 to simulate the select style for better results.