The default style of select is often ugly. In order to ensure the uniform style of the page, select needs to be beautify. Although there are many beautified plug-ins, searching for a lot, it is really a headache to introduce long css files and js files. In fact, the implementation principle of select is very simple, it is a process of clicking to switch display, hide and pass values. I simulated it with jquery, and write whatever style you want, without limiting the number.
Simple effects:
html:
<div> <font>›</font> <span>Option 1</span> <ul> <li>Option 1</li> <li>Option 1</li> <li>Option 2</li> <li>Option 3</li> </ul> </div> <div> <font>›</font> <span>Option 1</span> <ul> <li>Option 1</li> <li>Option 2</li> <li>Option 3</li> </ul> </div>
css:
ul{ margin:0; padding:0; list-style:none;}.select_box{ width:200px; height:36px; border:1px solid #3CF; position:relative; float:left; margin-right:50px;}.select_box span{ display:inline-block; width:200px; height:36px; curvesor:pointer; text-indent:10px;}.select_box .span_aa{ color:#C36;}.select_box ul{ width:200px; position:absolute; top:36px; left:-1px; border:1px solid #3CF; display:none; background:#fff;}.select_box li{ cursor:pointer; line-height:36px; text-indent:10px;}.select_box li:hover{ background:#39F; color:#fff;}.select_box font{ position:absolute; right:10px; font-size:26px; font-family:"Microsoft Yahei"; color:#3CF; transform:rotate(90deg);}js:
$(function(){ var s_title=$(".select_box span"); var s_select=$(".select_box li"); s_title.click(function(e){ $(this).addClass("span_aa"); $(this).next("ul").show(); e.stopPropagation(); }); s_select.click(function(){ var s_text=$(this).html(); var s_title_2=$(this).parent('ul').prev("span"); s_title_2.html(s_text).removeClass("span_aa"); $(this).parent('ul').hide(); }); $(document).click(function(){ s_title.removeClass("span_aa"); $(".select_box ul").hide(); }); });Source code download: js select drop-down box beautification download
If you still want to learn in depth, you can click on the jquery drop-down box effect summary and the JavaScript drop-down box effect summary to learn.
The above is all about this article, I hope it will be helpful for everyone to learn JavaScript programming.