jquery实现select下拉框美化特效代码分享


Posted in Javascript onAugust 18, 2015

这是一款基于jquery实现select下拉框美化特效代码,用户可以选择下拉菜单内容,是一款非常实用的特效源码。
 为大家分享的jquery实现select下拉框美化特效代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/g.css" type="text/css" rel="stylesheet" />
<link href="css/css.css" type="text/css" rel="stylesheet" />

</head>
<body>
<div class="searchbox">
 <div class="searchZone clearfix">
 <form target="_blank">
 <fieldset>
 <label>
 <input type="text" class="text" name="keyword" onblur="if(this.value==''){this.value='请输入关键字';this.style.color='#aaa'}" onfocus="if(this.value=='请输入关键字'){this.value='';this.style.color='#333'}" value="请输入关键字" />
 </label>
 <div class="left">
 <select style="display: none;" name="mySle" id="mySle">
 <option selected="selected" value="0">全站搜索</option>
 <option value="1">素材搜索</option>
 <option value="2">设计欣赏</option>
 <option value="3">桌面壁纸</option>
 <option value="4">设计教程</option>
 </select>
 </div>
 <label>
 <button type="submit">快给我搜一下</button>
 </label>
 </fieldset>
 </form>
 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/selectbox.js"></script>
 <script type="text/javascript"> $(document).ready(function() {$('#mySle').selectbox();});</script>
 </div>
 
 
 
</div>
</body>
</html>

效果演示 源码下载

运行效果图:

jquery实现select下拉框美化特效代码分享

如果大家还想深入学习,可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。

以上就是为大家分享的jquery实现select下拉框美化特效代码,希望大家可以喜欢。

Javascript 相关文章推荐
javascript parseInt 函数分析(转)
Mar 21 Javascript
JS实现网页滚动条感应鼠标变色的方法
Feb 26 Javascript
JavaScript中数据结构与算法(四):串(BF)
Jun 19 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
总结几道关于Node.js的面试问题
Jan 11 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 Javascript
webpack4 css打包压缩问题的解决
May 18 Javascript
详解javascript中的babel到底是什么
Jun 21 Javascript
JS精确判断数据类型代码实例
Dec 18 Javascript
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 #Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 #Javascript
js模拟淘宝网的多级选择菜单实现方法
Aug 18 #Javascript
js实现Select头像选择实时预览代码
Aug 17 #Javascript
基于jquery实现放大镜效果
Aug 17 #Javascript
js实现浏览本地文件并显示扩展名的方法
Aug 17 #Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 #Javascript
You might like
PHP 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
php数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
2014/05/08 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
Vue中render函数的使用方法
2018/01/31 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
2018/10/02 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
AngularJs中$cookies简单用法分析
2019/05/30 Javascript
详解Vue 如何监听Array的变化
2019/06/06 Javascript
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
浅谈python中的面向对象和类的基本语法
2016/06/13 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
Python中生成一个指定长度的随机字符串实现示例
2019/11/06 Python
python可视化text()函数使用详解
2020/02/11 Python
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
高中毕业的自我鉴定
2013/12/09 职场文书
小学教师自我鉴定范文
2014/03/20 职场文书
公司经理任命书
2014/06/05 职场文书
运动会宣传口号
2014/06/09 职场文书
停电通知范文
2015/04/16 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
开网店计划分析
2019/07/30 职场文书
详解MySQL的半同步
2021/04/22 MySQL
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python