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

2019独角兽企业重金招聘Python工程师标准>>>

表单在网页上的使用是很广泛的，但表单的单一性与它的特性决定了对它的美化通过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:显示的文本信息。

 

转载于:https://my.oschina.net/u/1415286/blog/181697