js自定义select下拉框美化特效


Posted in Javascript onMay 12, 2016

select的默认样式往往很丑,为保证页面样式风格统一,需要对select进行美化。虽然其美化的插件很多,一搜一大把,但是需要引入长长的css文件和js文件实在是件头痛的事。其实select的实现原理很简单,就是一个点击 切换 显示和隐藏 并传值 的过程。用jquery模拟了,样式想怎么写就怎么写,且不限数量。

朴素的效果:

js自定义select下拉框美化特效

html:

<div class="select_box">

  <font>›</font>

  <span>选项1</span>

 <ul>

  <li>选项1</li>

  <li>选项2</li>

  <li>选项3</li>    

 </ul>

 </div> 

 

 <div class="select_box">

  <font>›</font>

  <span>选项一</span>

 <ul>

  <li>选项一</li>

  <li>选项二</li>

  <li>选项三</li>    

 </ul>

 </div>

css:

ul{ margin:0; padding:0; list-style:none;}

.select_box{ width:200px; height:36px; border:1px solid #3CF; position:relative; float:left; margin-right:50px;}

.select_box span{ display:inline-block; width:200px; height:36px; line-height:36px; cursor:pointer; text-indent:10px;}

.select_box .span_aa{ color:#C36;}

.select_box ul{ width:200px; position:absolute; top:36px; left:-1px; border:1px solid #3CF; display:none; background:#fff;}

.select_box li{ cursor:pointer; line-height:36px; text-indent:10px;}

.select_box li:hover{ background:#39F; color:#fff;}

.select_box font{ position:absolute; right:10px; font-size:26px; font-family:"微软雅黑"; color:#3CF; transform:rotate(90deg);}

js:

$(function(){

  var s_title=$(".select_box span");

  var s_select=$(".select_box li");

 

  s_title.click(function(e){

   $(this).addClass("span_aa");

   $(this).next("ul").show();

   e.stopPropagation();

   });  

   

  s_select.click(function(){

   var s_text=$(this).html();

   var s_title_2=$(this).parent('ul').prev("span");

   s_title_2.html(s_text).removeClass("span_aa");

   $(this).parent('ul').hide();  

   });

   

  $(document).click(function(){

   s_title.removeClass("span_aa");

   $(".select_box ul").hide();  

   }); 

  

});

源码下载:js select下拉框美化下载

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

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript 处理HTML元素必须避免使用的一种方法
Jul 30 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
Jun 08 Javascript
jquery 插件实现多行文本框[textarea]自动高度
Mar 04 Javascript
JavaScript实现url参数转成json形式
Sep 25 Javascript
使用yeoman构建angular应用的方法
Aug 14 Javascript
详解js的作用域、预解析机制
Feb 05 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
JavaScript工具库之Lodash详解
Jun 15 Javascript
原生js代码能实现call和bind吗
Jul 31 Javascript
jQuery实现飞机大战小游戏
Jul 05 jQuery
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
May 12 #Javascript
JS函数的定义与调用方法推荐
May 12 #Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 #Javascript
JS定义类的六种方式详解
May 12 #Javascript
值得分享和收藏的Bootstrap学习教程
May 12 #Javascript
jQuery中$.each()函数的用法引申实例
May 12 #Javascript
判断JS对象是否拥有某属性的方法推荐
May 12 #Javascript
You might like
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
php生成word并下载代码实例
2019/03/15 PHP
封装好的省市地区联动控件附下载
2007/08/13 Javascript
js 匿名调用实现代码
2009/06/19 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
前端把html表格生成为excel表格的实例
2017/09/19 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
使用Vue实现一个树组件的示例
2020/11/06 Javascript
Python下singleton模式的实现方法
2014/07/16 Python
Python3学习笔记之列表方法示例详解
2017/10/06 Python
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
Python企业编码生成系统总体系统设计概述
2019/07/26 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
Python 实现try重新执行
2019/12/21 Python
使用python从三个角度解决josephus问题的方法
2020/03/27 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
小学生自我评价范例
2013/09/24 职场文书
给老婆的保证书范文
2014/04/28 职场文书
毕业证委托书范文
2014/09/26 职场文书
交通事故委托书范本
2014/09/28 职场文书
退学证明范本3篇
2014/10/29 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang