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错误：很奇怪的错误。。。

    刚刚调试java web中出现了一个很奇怪的现象,前端有一个页面通过ajax调用后台的servlet,当我把后台的servlet代码修改后(将返回值由a修改为b),前端页面仍然获取的是a.调试跟踪se ...

  2. poj 2632 Crashing Robots

    点击打开链接 Crashing Robots Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6655   Accepted: ...

  3. .NET类型转换的常用方式

    第一.隐式转换 byte, short, int, long, fload, double 等,根据这个排列顺序,各种类型的值依次可以向后自动进行转换 如果需要逆转换,则需要进行强制转化.同时考虑溢出 ...

  4. 命令行重新安装.net framework

    ①运行cmd ②运行命令: cd c:\\windows\\microsoft.net\\framework\v4.0.30319 ③在上述目录下执行如下命令 aspnet_regiis.exe -i ...

  5. Grunt 之 RequireJS

    RequireJs 提供了一个打包工具 r.js,可以将相关的模块打包为一个文件.相关说明:http://www.requirejs.org/docs/optimization.html 将相关的脚本 ...

  6. Bootstrap 3 How-To #1 下载与配置

    Bootstrap 3 发布了,通过简单的几步,我们就可以使用 Bootstrap 的样式表,图标,以及 javascript 来配置一个简单的站点. 准备 Bootstrap 不仅仅是一个代码集,还 ...

  7. 剖析Disruptor:为什么会这么快？（二）神奇的缓存行填充

    原文链接:http://mechanitis.blogspot.com/2011/07/dissecting-disruptor-why-its-so-fast_22.html 需FQ 计算机入门   ...

  8. sc delete 服务器名提示“指定的服务已经标记为删除”

    症状:停止服务后,右键无法点击“启动”,打开命令输入SC删除服务后提示如标题描述 原因:进程还在 解决方案:打开任务管理器,进程,找到你的已停止服务名,右键,结束进程,再操作即可删除服务

  9. oracle误删除恢复

    create table first_fill_20151207 as -- 生成到临时表select * from first_fillas of timestamp to_timestamp('2 ...

  10. 洛谷P2729 饲料调配 Feed Ratios

    P2729 饲料调配 Feed Ratios 36通过 103提交 题目提供者该用户不存在 标签USACO 难度普及/提高- 提交  讨论  题解 最新讨论 暂时没有讨论 题目背景 农夫约翰从来只用调 ...