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(img/icon.png) no-repeat 156px 0;可以替换成想要的下拉三角*/background: #ccc;}

        .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 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>

效果如下：

jquery美化select，自定义下拉框样式的更多相关文章

  1. jquery（select）下拉框 选取选中的值

    var get_date_type=$("#date_type").find("option:selected").val(); var get_date_ty ...

  2. 关于safari上的select宽高问题小技，自定义下拉框

    之前一直用windows做开发,最近换了个mac,在几经折腾之下,安装完了各种开发工具,IDE等,然后欣然打开自己正在开发的网站.突然发现mac上所有的下拉框都变了,都是默认样式,无论padding, ...

  3. 第二百一十二节，jQuery EasyUI，Combo(自定义下拉框)组件

    jQuery EasyUI,Combo(自定义下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方 ...

  4. easyui源码翻译1.32--Combo(自定义下拉框)

    前言 扩展自$.fn.validatebox.defaults.使用$.fn.combo.defaults重写默认值对象.下载该插件翻译源码 自定义下拉框显示一个可编辑的文本框和下拉面板在html页面 ...

  5. jquery+html三级联动下拉框

    jquery+html三级联动下拉框及详情页面加载时的select初始化问题   html写的三个下拉框,如下: <select name="ddlQYWZYJ" id=&q ...

  6. Vue.js中使用select选择下拉框

    在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...

  7. Dropdown.js基于jQuery开发的轻量级下拉框插件

    Dropdown.js 前言 在SPA(Single Page Application)盛行的时代,jQuery插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...

  8. jq--实现自定义下拉框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. vue自定义下拉框组件

    创建下拉框组件 Select.vue <template> <div class="selects"> <div :class="{sele ...

随机推荐

  1. [SQL]insert、update 表触发器应用的demo

    --创建测试表 create table student ( stu_id int ,libraryCardNo varchar() ) create table borrowbook ( b_id ...

  2. 生成ldf数据库文件

    .在我的电脑中删除LOG文件 c.附加数据库: 企业管理器--服务器--数据库--右键--附加数据库 此法将生成新的LOG,大小只有500多K

  3. 针对android方法数64k的限制，square做出的努力。精简protobuf

    1.早期的Dalvik VM内部使用short类型变量来标识方法的id,dex限制了程序的最大方法数是65535,如果超过最大限制,无法编译,把dex.force.jumbo=true添加到proje ...

  4. kylin一种OLAP的实现

    1.基于hive.hadoop的预先计算. 2.cube存储在HBASE里面.利用HBase的列存储,实现MOLAP 3.在cube上做数据分析,kylin实现标准的SQL,实现查询HBase 所以说 ...

  5. Xcode自动注释插件

    开源xcode插件:规范注释生成器VVDocumenter 1.类似eclipse 和 vs studio 在前面输入/// 后触发,自动生成代码注释,如图 2.GitHub工程文件地址:https: ...

  6. 《Code Complete》ch.14 组织直线型的代码

    WHAT? 最简单的控制流:即按照先后顺序放置语句与语句块 WHY? 尽管组织直线型的代码是一个简单的任务,但代码结构上的一些微妙之处还是会对代码质量.正确性.可读性和可维护性带来影响 HOW? 必须 ...

  7. POJ 1088 滑雪 记忆化DP

    滑雪 Time Limit: 1000MS   Memory Limit: 65536K       Description Michael喜欢滑雪百这并不奇怪, 因为滑雪的确很刺激.可是为了获得速度 ...

  8. CString.Format的详细用法(转)

    CString.Format的详细用法(转) 在MFC程序中,使用CString来处理字符串是一个很不错的选择.CString既可以处理Unicode标准的字符串,也可以处理ANSI标准的字符串.CS ...

  9. 欧拉路径Hrbust1351

    http://acm.hrbust.edu.cn/index.php?m=ProblemSet&a=showProblem&problem_id=1351 这道题先利用并查集的知识点, ...

  10. 使用MonkeyTest对Android客户端进行压力测试 自动化代码

    1.monkey命令简介 Monkey是Android中的一个命令行工具,可以运行在模拟器里或实际设备中.它向系统发送伪随机的用户事件流(如按键输入.触摸屏输入.手势输入等),实现对正在开发的应用程序 ...