jquery 表单美化 CSS3和jquery应用select框美化选择元素



81 321 108



特效描述:表单美化 select框美化 选择元素,到目前为止,浏览器控件是最困难的要素之一风格一致。这就是为什么我们正在建设一个脚本,要带一个普通的select元素,而代之以一个更好看,它的标记动力版本,同时保持所有功能完好。

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/styles.css" />

2. 引入JS

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="js/script.js"></script>

3. HTML代码

<div id="page">
	<h1>产品选择</h1>
	<form method="post" action="">
    	<!-- We are going to use jQuery to hide the select element and replace it -->
		<select name="fancySelect" class="makeMeFancy">
        	<!-- Notice the HTML5 data attributes -->
	        <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&lt;i&gt;in stock&lt;/i&gt;">iPhone 4</option>
        	<option value="2" data-icon="img/products/ipod.png" data-html-text="iPod &lt;i&gt;in stock&lt;/i&gt;">iPod</option>
            <option value="3" data-icon="img/products/air.png" data-html-text="MacBook Air&lt;i&gt;out of stock&lt;/i&gt;">MacBook Air</option>
            <option value="4" data-icon="img/products/imac.png" data-html-text="iMac Station&lt;i&gt;in stock&lt;/i&gt;">iMac Station</option>
        </select>
    </form>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 选项卡自动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到