js自定义select下拉框美化特效
来源: 阅读:1169 次 日期:2016-07-01 11:35:11
温馨提示: 小编为您整理了“js自定义select下拉框美化特效”,方便广大网友查阅!

这篇文章主要为大家介绍了javascript自定义select下拉框美化特效的相关资料,需要的朋友可以参考下

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

朴素的效果:

名单

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下拉框美化下载

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

更多信息请查看网络编程
由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:
咨询QQ:526150442(9:00—18:00)版权所有:
云南网警报警专用图标
Baidu
map