jQuery下拉美化搜索表单效果代码分享

前端技术 2023/09/05 JavaScript

本文实例讲述了jQuery下拉美化搜索表单效果。分享给大家供大家参考。具体如下：
JQuery下拉美化搜索表单样式代码是一款美化下拉框的表单，样式已写好，需要的朋友改一下就可以用了。
运行效果图：-------------------查看效果-------------------

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的jQuery下拉美化搜索表单效果代码如下

<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>

<div style=\"text-align:center;margin:50px 0; font:normal 14px/24px \'MicroSoft YaHei\';\">

</div>
</body>
</html>

以上就是为大家分享的jQuery下拉美化搜索表单样式代码，希望大家可以喜欢。

本文地址：https://www.stayed.cn/item/14447

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案