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 相关文章推荐
JavaScript中的Document文档对象
Jan 16 Javascript
js去字符串前后空格5种实现方法及比较
Apr 03 Javascript
JS 实现图片直接下载示例代码
Jul 22 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 Javascript
只需五句话搞定JavaScript作用域(经典)
Jul 26 Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 Javascript
layui下拉框获取下拉值(select)的例子
Sep 10 Javascript
Echarts地图添加引导线效果(labelLine)
Sep 30 Javascript
js简单粗暴的发布订阅示例代码
Jan 23 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常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
php格式化时间戳
2016/12/17 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
JavaScript 学习笔记(十一)
2010/01/19 Javascript
jquery showModelDialog的使用方法示例详解
2013/11/19 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
聊一聊JS中的prototype
2016/09/29 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
2017/09/19 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
动态加载JavaScript文件的3种方式
2018/05/05 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
使用vue实现通过变量动态拼接url
2020/07/22 Javascript
js实现简单的点名器随机色实例代码
2020/09/20 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
[02:00]最后,我终于出了辉耀
2018/03/27 DOTA
基于Python中单例模式的几种实现方式及优化详解
2018/01/09 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
django 数据库连接模块解析及简单长连接改造方法
2019/08/29 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
就业推荐表自我鉴定范文
2014/03/21 职场文书
电脑售后服务承诺书
2014/03/27 职场文书
求职信模板
2014/05/23 职场文书
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
婚礼双方父亲致辞
2015/07/27 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
Redis过期数据是否会被立马删除
2022/07/23 Redis