CSS Drop-down selection menu basic CSS style is not good-looking, through some simple style optimization, you can get the above style, incompatible IE6 style, because the use of opacity.
| The code is as follows |
Copy Code |
| <section class= "Dguide" >
<div class= "inner" >
<div class= "Dguide-form clearfix" >
<div class= "Dguide-select-area" id= "select" >
<ul>
<li class= "Half-col first-col" >
<div class= "Sel_wrap" >
<label> Please select your city </label>
<select class= "Select" Name= "" id= "c_city" >
<option value= "0" > Zhongshan </option>
<option value= "1" > Taiyuan City </option>
<option value= "2" > Guangzhou </option>
</select>
</div>
</li>
<li class= "Half-col" >
<div class= "Sel_wrap" >
<label> Please select area </label>
<select class= "Select" Name= "" id= "C_eara" >
<option value= "0" > Shiqi area </option>
<option value= "1" > Torch Development Zone </option>
<option value= "2" > West </option>
</select>
</div>
</li>
<li class= "One-col" >
<div class= "Sel_wrap" >
<label> Please select Medical Hospital </label>
<select class= "Select" Name= "" id= "C_hostipal" >
<option value= "0" > Hospital name 1</option>
<option value= "1" > Hospital name 2</option>
<option value= "2" > Hospital name 3</option>
</select>
</div>
</li>
<li class= "One-col" >
<div class= "Sel_wrap" >
<label> Please select Registration Department </label>
<select class= "Select" Name= "" id= "c_city" >
<option value= "0" > Department name 1</option>
<option value= "1" > Department name 2</option>
<option value= "2" > Department name 3</option>
</select>
</div>
</li>
</ul>
</div>
<div class= "Dguide-sub" >
<button class= "btn Btn-yellow" > Appointment Registration </button>
</div>
</div>
</div>
</section> |
CSS style:
| The code is as follows |
Copy Code |
| <style type= "Text/css" >
Ul{list-style:none; margin:0; padding:0;}
. Clearfix:before,. clearfix:after{display:table; Content: "";}
. Clearfix:after{clear:both;}
. Clearfix{zoom:1;}
body{font:14px/26px Microsoft Yahei, helvetica,arial; margin:0; max-width:600px;}
/*dguide*/
. Dguide{background: #F2F2F2;}
. Dguide-select-area ul{font-size:0 *word-spacing: -1px;}
. dguide-select-area li{margin-bottom:26px; letter-spacing:normal;}
. Dguide-select-area. Half-col{display:inline-block; *display:inline; *zoom:1; width:50%; vertical-align:top; Letter-spacing:normal; Word-spacing:normal; font-size:14px;}
@media screen and (-webkit-min-device-pixel-ratio:0) {
. Dguide-select-area ul{letter-spacing: -5px;}
}
. Dguide-select-area. First-col. sel_wrap{margin-right:20px;
. 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;}
. dguide-sub. btn{width:100%; text-align:center; line-height:64px; font-size:20px; border:none;}
. dguide-sub. Btn-yellow{background: #F06A26; color: #fff;}
</style> |
jquery Code:
| The code is as follows |
Copy Code |
<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);
});
</script> |
The effect code is as follows
Note: Remember to load the jquery plugin OH
