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. ADO.NET 实体框架 资料收集

    https://msdn.microsoft.com/en-us/data/aa937723.aspx https://msdn.microsoft.com/en-us/library/bb39957 ...

  2. log4net 日志写入MongoDB 实现分布式日志

    本人在.net framework 4.5下测试成功,首先需要安装log4mongo-net组件,见https://www.nuget.org/packages/log4mongo-net/ vs20 ...

  3. Windows server 2008 下iis7 架设ftp服务器

    架设了一天的ftp服务器,终于搞定了. 按着windows server 2003的思路在windows server 2008把ftp设置好后,登录过程老是出现:530 User cannot lo ...

  4. ExtJS 4.2 中自定义事件

    前台HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www ...

  5. 动手学servlet(一) 第一个servlet程序

    1.文件>新建>动态WEB项目 "javaeedemo">在Java Resource的src下新建包“servletdemo”,包下新建一个类“MyServet ...

  6. oracle错误处理及实操-【INS-20802】

    服务器硬件要求:内存>1GB,如果是虚拟机,必须设置内存为1.5G以上. 确定好主机名,安装完成以后,不要再修改主机名,一旦修改会导致oracle启动失败,注意:使用默认的localhost.l ...

  7. 把数组转换成sql中能使用的字符串

    1.数组对象转换成字符串,拼接成符合sql语句的语法 2.代码如下例子 public static void testString(){        String[] str=new String[ ...

  8. 学习总结 Java 基本数据类型 和标识符以及常用的关键字

    思维导图: public static void main(String[] args) { // java程序的入口点 c#是Main System.out.println("测试输出&q ...

  9. 互联网+医疗(FW)

    http://www.yn.xinhuanet.com/health/2015-06/05/c_134300133.htm 互联网+医疗 让合适的病人找合适的医生 www.yn.xinhuanet.c ...

  10. 洛谷P1466 集合 Subset Sums

    P1466 集合 Subset Sums 162通过 308提交 题目提供者该用户不存在 标签USACO 难度普及/提高- 提交  讨论  题解 最新讨论 暂时没有讨论 题目描述 对于从1到N (1 ...