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


Posted in Javascript onAugust 25, 2015

本文实例讲述了jQuery下拉美化搜索表单效果。分享给大家供大家参考。具体如下:
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下拉美化搜索表单样式代码,希望大家可以喜欢。

Javascript 相关文章推荐
在次封装easyui-Dialog插件实现代码
Nov 14 Javascript
基于jquery的jqDnR拖拽溢出的修改
Feb 12 Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 Javascript
JavaScript使用focus()设置焦点失败的解决方法
Sep 03 Javascript
javascript实现动态改变层大小的方法
May 14 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
JQuery 又谈ajax局部刷新
Nov 27 jQuery
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 Javascript
JS原生瀑布流效果实现
Apr 26 Javascript
layer.alert回调函数执行关闭弹窗的实例
Sep 11 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 27 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 #Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 #Javascript
js实现的tab标签切换效果代码分享
Aug 25 #Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 #Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
Mar 30 #Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 #Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 #Javascript
You might like
PHP个人网站架设连环讲(一)
2006/10/09 PHP
?算你??的 PHP 程式大小
2006/12/06 PHP
Php 构造函数construct的前下划线是双的_
2009/12/08 PHP
PHP生成Flash动画的实现代码
2010/03/12 PHP
php中的观察者模式简单实例
2015/01/20 PHP
PHP中串行化用法示例
2016/11/16 PHP
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
工作需要写的一个js拖拽组件
2011/07/28 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
2014/02/19 Javascript
SuperSlide2实现图片滚动特效
2014/06/20 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
详解jQuery中的getAll()和cleanData()
2019/04/15 jQuery
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
会计人员演讲稿
2014/09/11 职场文书
车贷收入证明范本
2014/09/14 职场文书
会议主持词通用版
2019/04/02 职场文书
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS
使用JS前端技术实现静态图片局部流动效果
2022/08/05 Javascript