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 相关文章推荐
JQuery中的ready函数冲突的解决方法
May 17 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 Javascript
点击button获取text内容并改变样式的js实现
Sep 09 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
Mar 24 Javascript
React入门教程之Hello World以及环境搭建详解
Jul 11 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 Javascript
一文了解Vue中的nextTick
May 06 Javascript
vue选项卡切换登录方式小案例
Sep 27 Javascript
Vue实现购物车基本功能
Nov 08 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
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
php+redis实现多台服务器内网存储session并读取示例
2017/01/12 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
兼容FF和IE的动态table示例自写
2013/10/21 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
jQuery监控文本框事件并作相应处理的方法
2015/04/16 Javascript
jquery插件jSignature实现手动签名
2015/05/04 Javascript
深入探讨javascript函数式编程
2015/10/11 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
2019/07/06 Javascript
vue.js实现图书管理功能
2019/09/24 Javascript
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
python的socket编程入门
2018/01/29 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
文件上传服务器-jupyter 中python解压及压缩方式
2020/04/22 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
上海奥佳笔试题面试题
2016/11/16 面试题
求职自荐信怎么写
2014/03/06 职场文书
大学生个人求职信
2014/06/02 职场文书
研究生个人学年总结
2015/02/14 职场文书
学生会辞职信
2015/03/02 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
居委会工作总结2015
2015/05/18 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书
2015年中秋节主持词
2015/07/30 职场文书