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 相关文章推荐
img标签中onerror用法
Aug 13 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
Jquery插件之打造自定义的select标签
Nov 30 Javascript
jquery获取自定义属性(attr和prop)实例介绍
Apr 21 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
详解Javascript事件驱动编程
Jan 03 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
微信小程序实现倒计时调用相机自动拍照功能
Jun 10 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
Mar 03 Javascript
vue-router定义元信息meta操作
Dec 07 Vue.js
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抽象类 介绍
2012/06/13 PHP
PHP中header和session_start前不能有输出原因分析
2013/01/11 PHP
php提取字符串中网站url地址的方法
2014/12/03 PHP
php实现微信模板消息推送
2018/03/30 PHP
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
基于slideout.js实现移动端侧边栏滑动特效
2016/11/28 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
关于webpack2和模块打包的新手指南(小结)
2017/08/07 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
Python中编写ORM框架的入门指引
2015/04/29 Python
python正则表达式及使用正则表达式的例子
2018/01/22 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
python的launcher用法知识点总结
2020/08/07 Python
在python3.9下如何安装scrapy的方法
2021/02/03 Python
美国紧身牛仔裤品牌:NYDJ
2017/05/24 全球购物
英国绿色商店:Natural Collection
2019/05/03 全球购物
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
《我要的是葫芦》教学反思
2014/02/23 职场文书
热门专业求职信
2014/05/24 职场文书
求职意向书
2014/07/29 职场文书
健康状况证明书
2014/11/26 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
校园新闻稿范文
2015/07/18 职场文书
详解Python为什么不用设计模式
2021/06/24 Python
Python socket如何解析HTTP请求内容
2022/02/12 Python
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android
Python字符串格式化方式
2022/04/07 Python