夏日博客

A-A+

jquery美化select自定义下拉框样式示例

2016年01月08日 前端设计 暂无评论 阅读 7 views 次

美化select一直是美工们要做的一个工作了，系统自带的select对于现代的设置来讲是非常的难看了，下面小编来为各位介绍一个jquery美化select自定义下拉框样式示例

select默认的样式的确太丑了，不得不让web前端开发人员费工夫来美化它，在网上搜了一个美化的效果，看起来还不错，收集起来已被后用，需要的可以直接拿去。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml"><head>  
  3. <title>select美化自定义下拉框样式</title>  
  4. </head>  
  5. <body>  
  6. <style type="text/css">  
  7. *{margin:0;padding:0;}  
  8. select{outline:none;}  
  9. ul{list-style:none;}  
  10. a{text-decoration:none;}  
  11. select{display: none;}  
  12. .select_box{font-family: "宋体"; font-size: 12px;color: #999999;width: 178px;line-height: 20px;margin: 50px auto;}  
  13. .select_showbox{border: 1px solid #b0a296;height: 20px;padding-left: 5px;/*background: url(img/icon.png) no-repeat 156px 0;可以替换成想要的下拉三角*/background: #ccc;}  
  14. .select_option{border: 1px solid #b0a296;border-top: none;display: none;}  
  15. .select_option li{padding-left: 5px;}  
  16. .select_option li.selected{background-color: #F3F3F3;color: #999;}  
  17. .select_option li.hover{background: #7b6959; color: #fff;}  
  18. </style>  
  19. <select name="choose" id="choose">  
  20.  <option value="选择风格" selected="selected">选择风格</option>  
  21.  <option value="复古风">复古风</option>  
  22.  <option value="摇滚风">摇滚风</option>  
  23.  <option value="怀旧风">怀旧风</option>  
  24. </select>  
  25. <script src="/jquery-1.7.2.min.js"></script>  
  26. <script type="text/javascript">  
  27. (function($){  
  28. var selects=$('select');//获取select  
  29. for(var i=0;i<selects.length;i++){  
  30.  createSelect(selects[i],i);  
  31. }  
  32. function createSelect(select_container,index){  
  33.  //创建select容器，class为select_box，插入到select标签前  
  34.  var tag_select=$('<div></div>');//div相当于select标签  
  35.  tag_select.attr('class','select_box');  
  36.  tag_select.insertBefore(select_container);  
  37.  //显示框class为select_showbox,插入到创建的tag_select中  
  38.  var select_showbox=$('<div></div>');//显示框  
  39.  select_showbox.css('cursor','pointer').attr('class','select_showbox').appendTo(tag_select);  
  40.  //创建option容器，class为select_option，插入到创建的tag_select中  
  41.  var ul_option=$('<ul></ul>');//创建option列表  
  42.  ul_option.attr('class','select_option');  
  43.  ul_option.appendTo(tag_select);  
  44.  createOptions(index,ul_option);//创建option  
  45.  //点击显示框  
  46.  tag_select.toggle(function(){  
  47.   ul_option.show();  
  48.  },function(){  
  49.   ul_option.hide();  
  50.  });  
  51.  var li_option=ul_option.find('li');  
  52.  li_option.on('click',function(){  
  53.   $(this).addClass('selected').siblings().removeClass('selected');  
  54.   var value=$(this).text();  
  55.   select_showbox.text(value);  
  56.   ul_option.hide();  
  57.  });  
  58.  li_option.hover(function(){  
  59.   $(this).addClass('hover').siblings().removeClass('hover');  
  60.  },function(){  
  61.   li_option.removeClass('hover');  
  62.  });  
  63. }  
  64. function createOptions(index,ul_list){  
  65.  //获取被选中的元素并将其值赋值到显示框中  
  66.  var options=selects.eq(index).find('option'),  
  67.   selected_option=options.filter(':selected'),  
  68.   selected_index=selected_option.index(),  
  69.   showbox=ul_list.prev();  
  70.   showbox.text(selected_option.text());  
  71.  //为每个option建立个li并赋值  
  72.  for(var n=0;n<options.length;n++){  
  73.   var tag_option=$('<li></li>'),//li相当于option  
  74.    txt_option=options.eq(n).text();  
  75.   tag_option.text(txt_option).css('cursor','pointer').appendTo(ul_list);  
  76.   //为被选中的元素添加class为selected  
  77.   if(n==selected_index){  
  78.    tag_option.attr('class','selected');  
  79.   }  
  80.  }  
  81. }  
  82. })(jQuery)  
  83. </script>  
  84. <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">  
  85. </div>  
  86. </body></html>  
标签：

给我留言