Js custom select drop-down box beautification effect, js drop-down box

Js custom select drop-down box beautification effect, js drop-down box

The default select style is often ugly. To ensure that the style of the page is uniform, you need to beautify the select style. Although there are many beautification plug-ins, It is 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 switching between display and hide and passing values. I used jquery to simulate it. I can write a style as much as I want, without limit.

Simple effect:

Html:

<Div class = "select_box"> <font> › </font> <span> Option 1 </span> <ul> <li> Option 1 </li> <li> option 2 </li> <li> Option 3 </li> </ul> </div> <div class = "select_box"> <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; line-height: 36px; cursor: 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: ""; 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

The above is all the content of this article, and I hope it will help you learn javascript programming.