脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → jquery实现select下拉框美化特效代码

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

 更新时间：2015年08月18日 10:35:39   投稿：lijiao  
这篇文章主要介绍了jquery实现select下拉框美化特效,实现效果简洁大方，推荐给大家，有需要的小伙伴可以参考下。

这是一款基于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下拉框效果汇总、JavaScript下拉框效果汇总进行学习。

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

您可能感兴趣的文章:

相关文章

  • 折叠菜单及选择器的运用

    折叠菜单及选择器的运用

    本文主要介绍了折叠菜单及选择器的运用。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • 学习JavaScript正则表达式

    学习JavaScript正则表达式

    这篇文章主要介绍了JavaScript正则表达式，详细深入的了解JavaScript正则表达式，从而更熟练掌握JavaScript正则表达式，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • js实现简单的购物车有图有代码

    js实现简单的购物车有图有代码

    这篇文章主要介绍了用js实现的简单购物车，配有截图，适合初学者
    2014-05-05
  • JavaScript头像上传插件源码分享

    JavaScript头像上传插件源码分享

    这篇文章主要为大家分享介绍了JavaScript头像上传插件源码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-03-03
  • js小数运算出现多位小数如何解决

    js小数运算出现多位小数如何解决

    关于JavaScript小数进行加、减、乘、除出现多位小数问题，自己研究了一下，而且作了相关的测试，收获不少知识点，需要的朋友可以参考下
    2015-10-10
  • 详解如何使用webpack打包JS

    详解如何使用webpack打包JS

    这篇文章主要介绍了详解如何使用webpack打包JS，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 如何将网页表格内容导入excel

    如何将网页表格内容导入excel

    这篇文章主要介绍了如何将网页表格内容导入excel,需要的朋友可以参考下
    2014-02-02
  • 基于bootstrop常用类总结(推荐)

    基于bootstrop常用类总结(推荐)

    下面小编就为大家带来一篇基于bootstrop常用类总结(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 微信小程序抽奖组件的使用步骤

    微信小程序抽奖组件的使用步骤

    这篇文章主要给大家介绍了关于微信小程序抽奖组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • 一道JS前端闭包面试题解析

    一道JS前端闭包面试题解析

    这篇文章主要针对一道JS前端闭包面试题进行解析，从例题出发详细介绍JS前端闭包相关知识，感兴趣的小伙伴们可以参考一下
    2015-12-12

最新评论