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 相关文章推荐
Prototype Hash对象 学习
Jul 19 Javascript
客户端限制只能上传jpg格式图片的js代码
Dec 09 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
Jul 04 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
javascript中递归函数用法注意点
Jul 30 Javascript
javascript中 try catch用法
Aug 16 Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 Javascript
js自定义Tab选项卡效果
Jun 05 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
May 16 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 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图片加水印原理(超简单的实例代码)
2013/01/18 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
php实现概率性随机抽奖代码
2016/01/02 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
2014/03/18 NodeJs
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
基于React.js实现原生js拖拽效果引发的思考
2016/03/30 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
2017/03/25 Javascript
React组件之间的通信的实例代码
2017/06/27 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
vue生命周期的探索
2019/04/03 Javascript
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
Python正规则表达式学习指南
2016/08/02 Python
python队列原理及实现方法示例
2019/11/27 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
Python调用REST API接口的几种方式汇总
2020/10/19 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
计算机专业毕业生自我鉴定
2014/01/16 职场文书
白酒市场营销方案
2014/02/25 职场文书
三八红旗集体先进事迹材料
2014/05/22 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书
婚庆主持词大全
2015/06/30 职场文书
同步小康驻村工作简报
2015/07/20 职场文书
golang 实现Location跳转方式
2021/05/02 Golang
详解vue中v-for的key唯一性
2021/05/15 Vue.js
Java Kafka 消费积压监控的示例代码
2021/07/01 Java/Android
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技
Java设计模式中的命令模式
2022/04/28 Java/Android