"Special effects" SELECT landscaping

Select's default style is often ugly, to ensure that the style of the page style uniform, need to beautify the select. Although its beautification of a lot of plugins, a search a lot, but the need to introduce long CSS files and JS files is a headache. In fact, the implementation of the select principle is very simple, is a click to toggle display and hide and pass the value of the process. Using jquery to simulate, style want to write how to write, and unlimited number.

Simplicity of Effect:

HTML :

<div class= "Select_box" >

<font>& #8250;</font>

<span> Options 1</span>

<ul>

<li> Options 1</li>

<li> Options 2</li>

<li> Options 3</li>

</ul>

</div>

<div class= "Select_box" >

<font>& #8250;</font>

<span> Option One </span>

<ul>

<li> Option One </li>

<li> Options Two </li>

<li> option three </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: "Microsoft Jas Black"; 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 ();

});

});

Effect preview: http://www.gbtags.com/gb/rtreplayerpreview-standalone/2851.htm

SOURCE Download: Http://pan.baidu.com/s/1cC3jOE

"Special effects" SELECT landscaping