jQuery下拉美化搜索表单样式代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery下拉美化搜索表单样式代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery下拉美化搜索表单样式代码</title>
<link href="css/base.css" type="text/css" rel="stylesheet" />
<style type="text/css">
/* search */
.search{border:2px solid #f58400;height:35px;margin:40px auto 0 auto;width:525px;}
.search select{display:none;}
.search .select_box{font-size:12px;color:#999999;width:100px;line-height:35px;float:left;position:relative;}
.search .select_showbox{height:35px;background:url(images/search_ico.png) no-repeat 80px center;text-indent:1.5em;}
.search .select_showbox.active{background:url(images/search_ico_hover.png) no-repeat 80px center;}
.search .select_option{border:2px solid #f58400;border-top:none;display:none;left:-2px;top:35px;position:absolute;z-index:99;background:#fff;}
.search .select_option li{text-indent:1.5em;width:90px;cursor:pointer;}
.search .select_option li.selected{background-color:#F3F3F3;color:#999;}
.search .select_option li.hover{background:#BEBEBE;color:#fff;}

.search input.inp_srh,.search input.btn_srh{border:none;background:none;height:35px;line-height:35px;float:left}
.search input.inp_srh{outline:none;width:365px;}
.search input.btn_srh{background:#f58400;color:#FFF;font-family:"微软雅黑";font-size:15px;width:60px;}
</style>

</head>


<body>

<div class="search radius6">
	<form name="searchform" method="post" action="/e/search/index.php">
		<input name='ecmsfrom' type='hidden' value='9'>
		<input type="hidden" name="show" value="title,newstext">
		<select name="classid" id="choose">
			<option value="0">搜索全部</option>
			<option value="1">新闻中心</option>
			<option value="4">技术文档</option>
			<option value="22">下载中心</option>
		</select> 
		<input class="inp_srh" name="keyboard"  placeholder="请输入您要搜索的作品" >
		<input class="btn_srh" type="submit" name="submit" value="搜索">
	</form>
</div>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.select.js"></script>
</body>
</html>

JS代码(jquery.select.js):

(function($){
	var selects=$('select');
	//鑾峰彇selectfor(var i=0;
	i<selects.length;
	i++){
	createSelect(selects[i],i);
}
function createSelect(select_container,index){
	//鍒涘缓select瀹瑰櫒锛宑lass涓簊elect_box锛屾彃鍏ュ埌select鏍囩鍓?var tag_select=$('<div></div>');
	//div鐩稿綋浜巗elect鏍囩tag_select.attr('class','select_box');
	tag_select.insertBefore(select_container);
	//鏄剧ず妗哻lass涓簊elect_showbox,鎻掑叆鍒板垱寤虹殑tag_select涓?var select_showbox=$('<div></div>');
	//鏄剧ず妗?select_showbox.css('cursor','pointer').attr('class','select_showbox').appendTo(tag_select);
	//鍒涘缓option瀹瑰櫒锛宑lass涓簊elect_option锛屾彃鍏ュ埌鍒涘缓鐨則ag_select涓?var ul_option=$('<ul></ul>');
	//鍒涘缓option鍒楄〃ul_option.attr('class','select_option');
	ul_option.appendTo(tag_select);
	createOptions(index,ul_option);
	//鍒涘缓option//鐐瑰嚮鏄剧ず妗?tag_select.toggle(function(){
	ul_option.show();
	ul_option.parent().find(".select_showbox").addClass("active");
}
,function(){
	ul_option.hide();
	ul_option.parent().find(".select_showbox").removeClass("active");
}
);
	var li_option=ul_option.find('li');
	li_option.on('click',function(){
	$(this).addClass('selected').siblings().removeClass('selected');
	var value=$(this).text();
	select_showbox.text(value);
	ul_option.hide();
}
);
	li_option.hover(function(){
	$(this).addClass('hover').siblings().removeClass('hover');
}
,function(){
	li_option.removeClass('hover');
}
);
}
function createOptions(index,ul_list){
	//鑾峰彇琚€変腑鐨勫厓绱犲苟灏嗗叾鍊艰祴鍊煎埌鏄剧ず妗嗕腑var options=selects.eq(index).find('option'),selected_option=options.filter(':selected'),selected_index=selected_option.index(),showbox=ul_list.prev();
	showbox.text(selected_option.text());
	//涓烘瘡涓猳ption寤虹珛涓猯i骞惰祴鍊?for(var n=0;
	n<options.length;
	n++){
	var tag_option=$('<li></li>'),//li鐩稿綋浜巓ptiontxt_option=options.eq(n).text();
	tag_option.text(txt_option).appendTo(ul_list);
	//涓鸿閫変腑鐨勫厓绱犳坊鍔燾lass涓簊electedif(n==selected_index){
	tag_option.attr('class','selected');
}
}
}
}
)(jQuery)

CSS代码(base.css):

@charset "utf-8";/* CSS Document */
body{color:#000;background:#FFF;font:12px/1.6 Verdana,Helvetica,sans-serif;text-align:center;}
*{margin:0;padding:0;}
input,select{font-size:12px;vertical-align:middle;}
body div{text-align:left;}
textarea,input{word-wrap:break-word;word-break:break-all;padding:0px;}
li{list-style-type:none;}
img{border:0 none;}
a{text-decoration:none;color:#333;}
a:hover{color:#1974A1;}
a:link,a:visited{color:#333;text-decoration:none;outline:none;}
a:hover{color:#0E4470;text-decoration:none;}

附件:下载该文件资源,减少时间成本(增值服务)