您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • 当前位置:首页 > 网页特效 > 表单按钮 >

    css和jquery实现的select美化自定义下拉框样式

    时间:2014-04-03 08:39 来源:互联网 作者:源码搜藏 浏览:收藏 挑错 推荐 打印

    运行代码保存代码复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
    • select美化自定义下拉框样式,貌似以前发过类似的Select美化特效,比起默认的select效果,看上去更漂亮了,兼容性做的也不错,期待大家共同学习提高。
    • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <title>select美化自定义下拉框样式</title>
      </head>
      <body>
      <style type="text/css">
      *{margin:0;padding:0;}
      select{outline:none;}
      ul{list-style:none;}
      a{text-decoration:none;}
      select{display: none;}
      .select_box{font-family: "宋体"; font-size: 12px;color: #999999;width: 178px;line-height: 20px;margin: 50px auto;}
      .select_showbox{border: 1px solid #b0a296;height: 20px;padding-left: 5px;background: url(/jscss/demoimg/201403/icon.png) no-repeat 156px 0;}
      .select_option{border: 1px solid #b0a296;border-top: none;display: none;}
      .select_option li{padding-left: 5px;}
      .select_option li.selected{background-color: #F3F3F3;color: #999;}
      .select_option li.hover{background: #7b6959; color: #fff;}
      </style>
      <select name="choose" id="choose">
      <option value="选择风格" selected="selected">选择风格</option>
      <option value="复古风">复古风</option>
      <option value="摇滚风">摇滚风</option>
      <option value="怀旧风">怀旧风</option>
      </select>
      <script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.7.2.min.js"></script>
      <script type="text/javascript">
      (function($){
      var selects=$('select');//获取select
      for(var i=0;i<selects.length;i++){
      createSelect(selects[i],i);
      }
      function createSelect(select_container,index){
      //创建select容器,class为select_box,插入到select标签前
      var tag_select=$('<div></div>');//div相当于select标签
      tag_select.attr('class','select_box');
      tag_select.insertBefore(select_container);
      //显示框class为select_showbox,插入到创建的tag_select中
      var select_showbox=$('<div></div>');//显示框
      select_showbox.css('cursor','pointer').attr('class','select_showbox').appendTo(tag_select);
      //创建option容器,class为select_option,插入到创建的tag_select中
      var ul_option=$('<ul></ul>');//创建option列表
      ul_option.attr('class','select_option');
      ul_option.appendTo(tag_select);
      createOptions(index,ul_option);//创建option
      //点击显示框
      tag_select.toggle(function(){
      ul_option.show();
      },function(){
      ul_option.hide();
      });
      var li_option=ul_option.find('li');
      li_option.on('click',function(){
      $(this).addClass('selected').siblings().removeClass('selected');
      var value=$(this).text();
      select_showbox.text(value);
      ul_option.hide();
      });
      li_option.hover(function(){
      $(this).addClass('hover').siblings().removeClass('hover');
      },function(){
      li_option.removeClass('hover');
      });
      }
      function createOptions(index,ul_list){
      //获取被选中的元素并将其值赋值到显示框中
      var options=selects.eq(index).find('option'),
      selected_option=options.filter(':selected'),
      selected_index=selected_option.index(),
      showbox=ul_list.prev();
      showbox.text(selected_option.text());
      //为每个option建立个li并赋值
      for(var n=0;n<options.length;n++){
      var tag_option=$('<li></li>'),//li相当于option
      txt_option=options.eq(n).text();
      tag_option.text(txt_option).css('cursor','pointer').appendTo(ul_list);
      //为被选中的元素添加class为selected
      if(n==selected_index){
      tag_option.attr('class','selected');
      }
      }
      }
      })(jQuery)
      </script>
      <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
      </div>
      </body>
      </html>
    css和jquery实现的select美化自定义下拉框样式由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/biaodan/7046.html
    标签:网站源码