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. myBatis实例

    一.搭建环境, 建立数据库 CREATE TABLE user( id ) not NULL AUTO_INCREMENT, userName ) DEFAULT NULL, userAge ) DE ...

  2. Hardwood Species（水）

    Time Limit:10000MS    Memory Limit:65536KB    64bit IO Format:%I64d & %I64u SubmitStatus Descrip ...

  3. IntelliJ IDEA显示行号方法

    File->Settings->Editor->General->Appearence->Show line numbers

  4. (转).net Application.DoEvents()的作用

    原文地址:http://blog.csdn.net/weinierbian/article/details/6231589 Application.DoEvents()的作用:处理所有的当前在消息队列 ...

  5. (转）一段如何調用Button.Click事件的故事

    原文地址:http://helloouc.blog.163.com/blog/static/5530527120091050314590/ 一.前言 由于小朱与BillChung的启发,想写一个故事, ...

  6. arm交叉编译器gnueabi、none-eabi、arm-eabi、gnueabihf、gnueabi区别

    命名规则 交叉编译工具链的命名规则为:arch [-vendor] [-os] [-(gnu)eabi] arch – 体系架构,如ARM,MIPSvendor – 工具链提供商os – 目标操作系统 ...

  7. 实验比较python中的range和xrange

    1 结论: 全用xrange,除非你需要使用返回的列表 2 实验一:性能对比 实验环境:win7 ,64位系统 python2.7 import time StartTime=time.time() ...

  8. 紧张：飞测独家のJmeter秘籍，限量发放

    飞测说:数月前,小怪我牺牲了周末时间,做了fiddler的扩展开发,从fiddler将请求导出,保存为jmx格式的文件,然后使用jmeter来调用.随后,小怪和同事(心&阳)一同研究jmete ...

  9. GitHub指南

    1.创建新仓库 #创建新文件夹,打开,然后执行 git init #以创建新的 git 仓库. 2.检出仓库 #执行如下命令以创建一个本地仓库的克隆版本: git clone /path/to/rep ...

  10. （转）C#进行图像处理的几种方法（Bitmap,BitmapData,IntPtr）

    转自 http://blog.sina.com.cn/s/blog_628821950100wh9w.html C#进行图像处理的几种方法 本文讨论了C#图像处理中Bitmap类.BitmapData ...