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. Java SE 第十六讲----面向对象特征之多态

    1.多态:polymorphism:我们说的子类就是父类(玫瑰是花,男子是人),因此多态的意思就是:父类型的引用可以指向子类的对象 public class PolyTest { public sta ...

  2. Delphi中自画TStatusBar面板中的文字颜色背景以及图片

    转自 http://www.delphitop.com/html/kongjian/351.html 首先定义:procedure TStatusForm.FormCreate(Sender: TOb ...

  3. Flask-SQLAlchemy 学习总结

    初始化和配置 ORM(Object Relational Mapper) 对象关系映射.指将面对对象得方法映射到数据库中的关系对象中.Flask-SQLAlchemy是一个Flask扩展,能够支持多种 ...

  4. 如何在组件(Component中)模拟用户控件(UserControl)中FindForm()？

    using System; using System.Collections.Generic; using System.ComponentModel; using System.ComponentM ...

  5. 在eclipse中生成html注释文档

    生成api文档 文档注释/** 1.描述 2.@author 作者 @version 版本 3.@param 参数 @return 返回值的含义 @throws 抛出异常描述 @deprecated ...

  6. Hive参数层面常用优化

    1.hive数据仓库权限问题: set hive.warehouse.subdir.inherit.perms=true; 2.HiveServer2的内存 连接的个数越多压力越大,可以加大内存:可以 ...

  7. 0901~0907面试总结（腾讯CDC、金蝶）

    纯脑记,但应该不会差太多 20150901腾讯CDC面试(初级外包岗) 0826的上午先用QQ进行了初步沟通,要求做一个不考虑AI的井字棋游戏,0830上午E-mail上交了做好的DEMO,然后等了几 ...

  8. <关于数据仓库>基于docker的Mysql与Hadoop/Hive之间的数据转移 (使用Apache Sqoop™)

    原创博客,转载请联系博主! 摘要:本文介绍了如何使用docker快速搭建一个可以从外部访问的mysql服务容器,和由docker搭建的分布式Hadoop文件系统,并且使用ApacheSqoop完成将m ...

  9. alter table <表名 > add constraint <主键名>用法

    alter table <表名 > add constraint  <主键名>用法介绍 1.主键约束: 要对一个列加主键约束的话,这列就必须要满足的条件就是分空 因为主键约束: ...

  10. Java基础——异常体系

    在Java中,异常对象都是派生于Throwable类的一个实例,Java的异常体系如下图所示: 所有的异常都是由Throwable继承而来,在下一层立即分解为两个分支,Error和Exception. ...