jquery+css3美化select下拉列表框特效

表單在網頁上的使用是很普遍的，但表單的單一性與它的特性決定了對它的美化經過CSS樣式是很難達到咱們想要的效果的，因此每每會經過js+css樣式的效果來代替表單上的一些功能。select下拉列表框爲咱們提供了很好的選擇功能，今天跟你們分享的就是經過jquery代碼與css3樣式對select下拉列表進行美化在效果上達到跟列表選擇同樣的功能。

功能說明：

點擊列表框時向下滑動展開列表信息，不點擊的話它會一直展現，每一個選項中以圖文列表的方式表現，這樣就更加人性化能夠顯示更多的信息，點擊鼠標則隱藏下拉的列表。

使用說明：

1.引入CSS與JS文件

<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="js/script.js"></script>

2.添加列表內容

<select name="fancySelect" class="makeMeFancy">
	        <option value="0" selected="selected" data-skip="1">Choose Your Product</option>
        	<option value="1" data-icon="img/products/iphone.png" data-html-text="iPhone 4">iPhone 4</option>
        	<option value="2" data-icon="img/products/ipod.png" data-html-text="iPod ">iPod</option>
            <option value="3" data-icon="img/products/air.png" data-html-text="MacBook Air">MacBook Air</option>
            <option value="4" data-icon="img/products/imac.png" data-html-text="iMac Station">iMac Station</option>
        </select>

data-icon:列表中的圖片地址; data-html-text:顯示的文本信息。