首页 > 代码库 > 自定义下拉列表框(2015.1.30)

自定义下拉列表框(2015.1.30)

因为html自带的select下拉列表框很丑,所以一般我们经常需要用到自定义下拉列表框。

如实现:技术分享

我们需要的页面代码如下:

<!DOCTYPE html><html ><head><meta charset="utf-8" /><meta name="description" content="【联展视频】邀请机构/老师合作,拥有专业团队免费视频录制和一站式专业服务,让你再也不用为了找教室和学员而烦恼!"/><meta name="keywords" content="联展视频机构合作,联展视频老师合作" /><title>联展视频一中国领先教育平台</title><link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"http://v.thea.cn/public/css/common.css" /><link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"css/agency_apply.css" /><!--[if  IE]> <script> (function(){if(!/*@cc_on!@*/0){return;}var e = "header,footer,nav,article,section".split(,),i=e.length;while(i--){document.createElement(e[i])}})() </script> <![endif]--> <!--[if IE 6]><script src=http://www.mamicode.com/"http://k.thea.cn/templates/front/js/pngfix.min.js"><script type="text/javascript" src=http://www.mamicode.com/"http://k.thea.cn/templates/front/js/DD_belatedPNG.js"></script></script><script>DD_belatedPNG.fix(*);</script><![endif]--></head><body class="bg_f5">    <header class="header">        <div class="box_w1002 clearfix">            <a href=http://www.mamicode.com/"/" class="logo left"><img width="307" height="44" src=http://www.mamicode.com/"images/temp_agency_subjec_icons1.png" alt="" /></a>            <nav class="left clearfix"><ul>                <li><a href=http://www.mamicode.com/"index.html?go=2">服务内容</a></li>                <li><a href=http://www.mamicode.com/"index.html?go=3">合作收益</a></li>                <li><a href=http://www.mamicode.com/"index.html?go=4">合作流程</a></li>            </ul></nav>            <span class="phone right">0755-83246610</span>        </div>    </header>    <div id="agency_sub">        <div class="agency_sub_in">                <div class="tab_tit clearfix"><span class="cur" data-mark="jg">机构申请<em></em></span><span data-mark="ls">老师申请<em></em></span></div>                <div class="tab_con_jg tab_con" >                    <h4>机构信息</h4>                    <div class="input_box"><span><b>*</b>机构名称:</span><input type="text" name="organname" id="organname"/></div>                    <div class="input_box"><span><b>*</b>机构类型:</span>                    <div id="ddl_agen_type" class="select left">                            <span class="btn_select">请选择</span>                            <ul>                                <li>线上机构</li>                                <li>线下机构</li>                                <li>线上线下均有</li>                            </ul>                        </div>                    </div>                    <div class="input_box"><span>机构网址:</span><input type="text" name="organurl" id="organurl" /></div>                    <div id="ddl_agen_school_type" class="input_box"><span><b>*</b>学校类型:</span>                    <div class="select left">                            <span class="btn_select">请选择学校课程类型</span>                            <ul>                                <li>职业考试类</li>                                <li>职业技能类</li>                                <li>语言类</li>                                <li>IT/互联/互联网</li>                                <li>职场/管理培训</li>                                <li>文体/艺术/兴趣</li>                                <li>中小学</li>                                <li>学历教育</li>                                <li>其他</li>                            </ul>                        </div>                    </div>                                        <h4>申请人信息</h4>                    <div class="input_box"><span><b>*</b>申请人姓名:</span><input id="agen_username" type="text" name="agen_username" id="username"/></div>                    <div class="input_box"><span><b>*</b>申请人手机:</span><input class="left" id="agen_mobile" type="text" name="agen_mobile" id="agen_mobile"/><font style="font-size:12px;color:#ff0000;margin-left:10px;"></font></div>                    <div class="prov input_box"><span><b>*</b>所在城市:</span>                        <div class="prov_select  left">                            <span class="btn_select">请选择</span>                                 <ul id="provinceselect"  >                                            <li>北京</li>                                            <li>天津</li>                                            <li>河北</li>                                            <li>山西</li>                                            <li>内蒙古</li>                                            <li>辽宁</li>                                            <li>吉林</li>                                            <li>黑龙江</li>                                            <li>山东</li>                                            <li>江苏</li>                                            <li>浙江</li>                                            <li>上海</li>                                            <li>安徽</li>                                            <li>福建</li>                                            <li>江西</li>                                            <li>河南</li>                                            <li>湖北</li>                                            <li>湖南</li>                                            <li>广东</li>                                            <li>广西</li>                                            <li>海南</li>                                            <li>重庆</li>                                            <li>四川</li>                                            <li>贵州</li>                                            <li>云南</li>                                            <li>西藏</li>                                            <li>陕西</li>                                            <li>甘肃</li>                                            <li>青海</li>                                            <li>宁夏</li>                                            <li>新疆</li>                                            <li>台湾</li>                                            <li>香港</li>                                            <li>澳门</li>                                            <li>海外</li>                                        </ul>                        </div>                        <em class="left">省</em>                        <div class="city_select  left" >                            <span class="btn_select">请选择</span>                            <ul id="cityselect"></ul>                        </div>                        <em class="left">市</em>                    </div>                                        <div class="btn_box"><a href=http://www.mamicode.com/"javascript:void(0);" id="oran">提交申请</a></div>                </div>                <div class="tab_con_ls tab_con" style="display:none;">                                        <div class="input_box"><span><b>*</b>申请人姓名:</span><input type="text"  name="username" id="username"/></div>                    <div class="input_box"><span><b>*</b>申请人手机:</span><input class="left" type="text" name="mobile" id="mobile"/><font style="font-size:12px;color:#ff0000;margin-left:10px;"></font></div>                    <div class="input_box"><span><b>*</b>学校类型:</span>                    <div class="select left" id="ddl_school_type">                            <span class="btn_select">请选择学校课程类型</span>                            <ul>                                <li>职业考试类</li>                                <li>职业技能类</li>                                <li>语言类</li>                                <li>IT/互联/互联网</li>                                <li>职场/管理培训</li>                                <li>文体/艺术/兴趣</li>                                <li>中小学</li>                                <li>学历教育</li>                                <li>其他</li>                            </ul>                        </div>                    </div>                    <div class="prov input_box"><span><b>*</b>所在城市:</span>                        <div class="prov_select  left">                            <span class="btn_select">请选择</span>                                 <ul id="provinceselect1"  >                                            <li>北京</li>                                            <li>天津</li>                                            <li>河北</li>                                            <li>山西</li>                                            <li>内蒙古</li>                                            <li>辽宁</li>                                            <li>吉林</li>                                            <li>黑龙江</li>                                            <li>山东</li>                                            <li>江苏</li>                                            <li>浙江</li>                                            <li>上海</li>                                            <li>安徽</li>                                            <li>福建</li>                                            <li>江西</li>                                            <li>河南</li>                                            <li>湖北</li>                                            <li>湖南</li>                                            <li>广东</li>                                            <li>广西</li>                                            <li>海南</li>                                            <li>重庆</li>                                            <li>四川</li>                                            <li>贵州</li>                                            <li>云南</li>                                            <li>西藏</li>                                            <li>陕西</li>                                            <li>甘肃</li>                                            <li>青海</li>                                            <li>宁夏</li>                                            <li>新疆</li>                                            <li>台湾</li>                                            <li>香港</li>                                            <li>澳门</li>                                            <li>海外</li>                                        </ul>                        </div>                        <em class="left">省</em>                        <div class="city_select  left" >                            <span class="btn_select">请选择</span>                            <ul id="cityselect1"></ul>                        </div>                        <em class="left">市</em>                    </div>                                                            <div class="btn_box"><a href=http://www.mamicode.com/"javascript:void(0);" id="teacher">提交申请</a></div>                </div>                <div class="apply_success" style="display:none;">                    <div class="apply_success_in" >                        <h4>您已成功申请,请保持电话畅通,我们将于10个工作日联系您</h4>                        <a href=http://www.mamicode.com/"http://v.thea.cn/zt/agency/agency_apply.html">返回当前申请学校页&gt;&gt;</a>                            <a href=http://www.mamicode.com/"http://v.thea.cn/school_1" class="pl_40">查看更多名校&gt;&gt;</a>                    </div>                </div>        </div>    </div>        <footer class="clearfix" id="footer">        <div class="main">            <ul class="right">                <li><a target="_blank" href=http://www.mamicode.com/"http://www.thea.cn">教育联展网</a>|</li>                <li><a target="_blank" href=http://www.mamicode.com/"/Help/about/">关于我们</a>|</li>                <li><a target="_blank" href=http://www.mamicode.com/"/Help/contact/">联系我们</a>|</li>                <li><a target="_blank" href=http://www.mamicode.com/"/Help/advice/">建议反馈</a>|</li>                <li><a target="_blank" href=http://www.mamicode.com/"/Help/">帮助中心</a></li>                            </ul>            <p>诺达实业有限公司版权所有&nbsp;&nbsp;&copy;2005-2013&nbsp;粤ICP备10032899号-3</p>        </div>    </footer></body><script data-cfg-corelib="http://v.thea.cn/public/js/jquery.js" src=http://www.mamicode.com/"http://v.thea.cn/public/js/do.js" type="text/javascript"></script><script type="text/javascript">function getQuery(para){ var reg = new RegExp("(^|&)"+para +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r!=null){ return unescape(r[2]); } return null; } var reg = /^1[3-9]\d{9}$/;var cityall = {        "prov0": ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云县", "延庆县"],        "prov1": ["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区", "塘沽区", "汉沽区", "大港区", "东丽区", "西青区", "津南区", "北辰区", "武清区", "宝坻区", "宁河县", "静海县", "蓟县"],        "prov2": ["石家庄", "唐山", "秦皇岛", "邯郸", "邢台", "保定", "张家口", "承德", "沧州", "廊坊", "衡水"],        "prov3": ["太原", "大同", "阳泉", "长治", "晋城", "朔州", "晋中", "运城", "忻州", "临汾", "吕梁"],        "prov4": ["呼和浩特", "包头", "乌海", "赤峰", "通辽", "鄂尔多斯", "呼伦贝尔", "兴安盟", "锡林郭勒盟", "乌兰察布盟", "巴彦淖尔盟", "阿拉善盟"],        "prov5": ["沈阳", "大连", "鞍山", "抚顺", "本溪", "丹东", "锦州", "营口", "阜新", "辽阳", "盘锦", "铁岭", "朝阳", "葫芦岛"],        "prov6": ["长春", "吉林", "四平", "辽源", "通化", "白山", "松原", "白城", "延边朝鲜族自治州"],        "prov7": ["哈尔滨", "齐齐哈尔", "鸡西", "鹤岗", "双鸭山", "大庆", "伊春", "佳木斯", "七台河", "牡丹江", "黑河", "绥化", "大兴安岭"],        "prov8": ["济南", "青岛", "淄博", "枣庄", "东营", "烟台", "潍坊", "济宁", "泰安", "威海", "日照", "莱芜", "临沂", "德州", "聊城", "滨州", "菏泽"],        "prov9": ["南京", "无锡", "徐州", "常州", "苏州", "南通", "连云港", "淮安", "盐城", "扬州", "镇江", "泰州", "宿迁"],        "prov10": ["杭州", "宁波", "温州", "嘉兴", "湖州", "绍兴", "金华", "衢州", "舟山", "台州", "丽水"],        "prov11": ["黄浦区", "卢湾区", "徐汇区", "长宁区", "静安区", "普陀区", "闸北区", "虹口区", "杨浦区", "闵行区", "宝山区", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "南汇区", "奉贤区", "崇明县"],        "prov12": ["合肥", "芜湖", "蚌埠", "淮南", "马鞍山", "淮北", "铜陵", "安庆", "黄山", "滁州", "阜阳", "宿州", "巢湖", "六安", "亳州", "池州", "宣城"],        "prov13": ["福州", "厦门", "莆田", "三明", "泉州", "漳州", "南平", "龙岩", "宁德"],        "prov14": ["南昌", "景德镇", "萍乡", "九江", "新余", "鹰潭", "赣州", "吉安", "宜春", "抚州", "上饶"],        "prov15": ["郑州", "开封", "洛阳", "平顶山", "安阳", "鹤壁", "新乡", "焦作", "濮阳", "许昌", "漯河", "三门峡", "南阳", "商丘", "信阳", "周口", "驻马店"],        "prov16": ["武汉", "黄石", "十堰", "宜昌", "襄樊", "鄂州", "荆门", "孝感", "荆州", "黄冈", "咸宁", "随州", "恩施土家族苗族自治州"],        "prov17": ["长沙", "株洲", "湘潭", "衡阳", "邵阳", "岳阳", "常德", "张家界", "益阳", "郴州", "永州", "怀化", "娄底", "湘西土家族苗族自治州"],        "prov18": ["广州", "韶关", "深圳", "珠海", "汕头", "佛山", "江门", "湛江", "茂名", "肇庆", "惠州", "梅州", "汕尾", "河源", "阳江", "清远", "东莞", "中山", "潮州", "揭阳", "云浮"],        "prov19": ["南宁", "柳州", "桂林", "梧州", "北海", "防城港", "钦州", "贵港", "玉林", "百色", "贺州", "河池", "南宁", "柳州"],        "prov20": ["海口", "三亚", "其他"],        "prov21": ["万州区", "涪陵区", "渝中区", "大渡口区", "江北区", "沙坪坝区", "九龙坡区", "南岸区", "北碚区", "万盛区", "双桥区", "渝北区", "巴南区", "黔江区", "长寿区", "綦江县", "潼南县", "铜梁县", "大足县", "荣昌县", "璧山县", "梁平县", "城口县", "丰都县", "垫江县", "武隆县", "忠县", "开县", "云阳县", "奉节县", "巫山县", "巫溪县", "石柱土家族自治县", "秀山土家族苗族自治县", "酉阳土家族苗族自治县", "彭水苗族土家族自治县", "江津市", "合川市", "永川市", "南川市"],        "prov22": ["成都", "自贡", "攀枝花", "泸州", "德阳", "绵阳", "广元", "遂宁", "内江", "乐山", "南充", "眉山", "宜宾", "广安", "达州", "雅安", "巴中", "资阳", "阿坝", "甘孜", "凉山"],        "prov23": ["贵阳", "六盘水", "遵义", "安顺", "铜仁", "黔西南", "毕节", "黔东南", "黔南"],        "prov24": ["昆明", "曲靖", "玉溪", "保山", "昭通", "楚雄", "红河", "文山", "思茅", "西双版纳", "大理", "德宏", "丽江", "怒江", "迪庆", "临沧"],        "prov25": ["拉萨", "昌都", "山南", "日喀则", "那曲", "阿里", "林芝"],        "prov26": ["西安", "铜川", "宝鸡", "咸阳", "渭南", "延安", "汉中", "榆林", "安康", "商洛"],        "prov27": ["兰州", "嘉峪关", "金昌", "白银", "天水", "武威", "张掖", "平凉", "酒泉", "庆阳", "定西", "陇南", "临夏", "甘南"],        "prov28": ["西宁", "海东", "海北", "黄南", "海南", "果洛", "玉树", "海西"],        "prov29": ["银川", "石嘴山", "吴忠", "固原"],        "prov30": ["乌鲁木齐", "克拉玛依", "吐鲁番", "哈密", "昌吉", "博尔塔拉", "巴音郭楞", "阿克苏", "克孜勒苏", "喀什", "和田", "伊犁", "塔城", "阿勒泰"],        "prov31": ["台北", "高雄", "其他"],        "prov32": [""],        "prov33": [""],        "prov34": [""]    };       Do.add(ad-css, {path: http://v.thea.cn/public/css/artdialog.css, type: css});Do.add(ad, {path: http://v.thea.cn/public/js/artDialog.js, type: js, requires: [ad-css]});    Do.ready("ad",function(){        $(".tab_tit span").click(function(){        $(".select").find("ul").hide();        var _this=$(this);        _this.addClass("cur").siblings().removeClass("cur");        $(".tab_con_"+_this.data("mark")).show().siblings(".tab_con").hide();    })    var from=getQuery("choose");    if(from=="ls"){        var _choose=$(".tab_tit span").filter("[data-mark=‘ls‘]");        _choose.trigger("click");    }        //下拉列表框选中隐藏    var _select=$(".btn_select");    var selecttimeout;    _select.click(function(){            $(this).next("ul").show();    })    _select.mouseout(function(){        selecttimeout&&clearTimeout(selecttimeout);        selecttimeout=setTimeout(function(){            $(this).next("ul").hide();        },500);    })    _select.next("ul").mouseenter(function(){        selecttimeout&&clearTimeout(selecttimeout);    })    _select.next("ul").mouseleave(function(){        $(this).hide();    })    $(".select").find("li").click(function(){        $(this).addClass("chosen").siblings().removeClass("chosen");        $(this).parent().prev().html($(this).html());        $(this).parent().hide();    })    $("#provinceselect li").add(("#provinceselect1 li")).click(function() {                $(this).removeClass("selected").addClass("selected").siblings().removeClass("selected");                var obj = $(this).parent();                obj.prev().html($(this).html());                var cityselect=obj.parent().next().next(".city_select").find("ul");                obj.parent().next().next(".city_select").find(".btn_select").html("请选择");                var provcode = obj.find(li).index(obj.find(li.selected));                var cityarr = cityall["prov" + provcode];                var cityoption = "";                if (provcode) {                    for (var i = 0; i<cityarr.length; i++) {                        cityoption += "<li>" + cityarr[i] + "</li>";                    }                    cityselect.html(cityoption).find("li").click(function() {                        $(this).removeClass("selected").addClass("selected").siblings().removeClass("selected");                        $(this).parent().hide();                        $(this).parent().prev().html($(this).html());                    });                } else {                    cityselect.html("");                }                obj.hide();            });     $("#mobile").add("#agen_mobile").keyup(function(){                                            //验证手机            $(this).val($(this).val().replace(/(\W|[a-z]|[A-Z]|_)/g,""));            if(11 < $(this).val().length){                $(this).val($(this).val().substr(0,11));            }        });    $("#mobile").add("#agen_mobile").blur(function(){        if (!reg.test($(this).val())) {            $(this).next("font").addClass("error").html("手机号码格式不正确");        }else{            $(this).removeClass("error").html("");        }    })    //提交机构申请    $("#oran").click(function(){        var organname=$("#organname").val(),            _ddl_agen_type=$("#ddl_agen_type").find("li.chosen");        var ddl_agen_type=_ddl_agen_type.length>0?_ddl_agen_type.html():"";        var organurl=$("#organurl").val(),            _ddl_agen_school_type=$("#ddl_agen_school_type").find("li.chosen"),            ddl_agen_school_type=_ddl_agen_school_type.length>0?_ddl_agen_school_type.html():"";        var agen_username=$("#agen_username").val(),            agen_mobile=$("#agen_mobile").val();        var _prov_city=$("#agen_mobile").parent().next(".prov"),            province=_prov_city.find(".prov_select").find(".btn_select").html(),            city=_prov_city.find(".city_select").find(".btn_select").html();            province=province=="请选择"?"":province;            city=city=="请选择"?"":city;        if (!reg.test($("#agen_mobile").val())) {            $("#agen_mobile").next("font").addClass("error").html("手机号码格式不正确");            return false;        }        if(organname.length==0||ddl_agen_type.length==0||ddl_agen_school_type.length==0||agen_username.length==0||agen_mobile.length==0||province.length==0 ){            art.dialog({                    title: 提示,                    time: 2,                    content: 加<strong style="color:#ff0000;padding:0 4px;font-weight:bold;">*</strong>为必填项,请填写完整后再提交!,                    zIndex: 11000                });                return false;        }        alert("机构名称:"+organname+",机构类型:"+ddl_agen_type+",机构网址:"+organurl+",学校类型:"+ddl_agen_school_type+",申请人姓名:"+agen_username+",申请人手机:"+agen_mobile+"省份:"+province+",城市"+city);            })    //提交老师申请    $("#teacher").click(function(){        var username=$("#username").val(),            mobile=$("#mobile").val(),            _ddl_school_type=$("#ddl_school_type").find("li.chosen");            ddl_school_type=_ddl_school_type.length==0?"":_ddl_school_type.text(),            _pro_city=$("#ddl_school_type").parent().next("");            var province = _pro_city.find(".prov_select").find("span").html();                province = province == "请选择" ? "" : province;                var city = _pro_city.find(".city_select").find("span").html();                city = city == "请选择" ? "" : city;            //alert("申请人姓名:"+username+",申请人手机:"+mobile+",学校类型:"+ddl_school_type+",省份:"+province+",城市:"+city);        if (!reg.test($("#mobile").val())) {            $("#mobile").next("font").addClass("error").html("手机号码格式不正确");            return false;        }        if(username.length==0||mobile.length==0||ddl_school_type.length==0||province.length==0){            art.dialog({                    title: 提示,                    time: 2,                    content: 加<strong style="color:#ff0000;padding:0 4px;font-weight:bold;">*</strong>为必填项,请填写完整后再提交!,                    zIndex: 11000                });                return false;        }                                            })})</script></html>

css代码如下:

.bg_f5{background-color:#f5f5f5;}body{font-family:"microsoft yahei","Microsoft Yahei";font-size:12px;background:none #f5f5f5;}.box_w1002{width:1002px;margin:0 auto;}.header{width:100%;min-width:1002px;margin:0 auto;height:50px;position:fixed;z-index:9999;top:0;_position:absolute;background-color:#368ee0;font-size:16px;color:#fff;}.header .logo{display:block;width:307px;height:44px;margin-top:4px;margin-right:115px;}.header li{float:left;margin-right:40px;}.header li a{color:#fff;line-height:50px;}.header .phone{display:block;height:32px;line-height:32px;padding-left:38px;margin:9px 0;background:url(../images/temp_agency_subjec_icons.png) no-repeat -500px 0;}#footer {height:39px; line-height:39px; margin:0 auto;padding-top:45px;padding-bottom:80px; background-color:#f5f5f5;border:0 none;  color:#999;}#footer li {float:left; _display:inline; margin-left:10px; color:#ccc;}#footer li a {margin-right:10px; color:#999;}/*机构申请的样式*/#agency_sub{padding-top:116px;font-family:"microsoft yahei","Microsoft Yahei";}#agency_sub .agency_sub_in{width:1002px;margin:0 auto;background-color:#fff;}#agency_sub .tab_tit{height:50px;background-color:#e8e8e8;line-height:50px;text-align:center;font-size:18px;color:#4f4f4f;}#agency_sub .tab_tit span{float:left;position:relative;display:block;width:501px;cursor:pointer;}#agency_sub .tab_tit span.cur{background-color:#368ee0;color:#fff;}#agency_sub .tab_tit span em{position:absolute;bottom:-6px;left:50%;margin-left:-6px;display:none;width:12px;height:8px;background:url(../images/temp_agency_subjec_icons.png) no-repeat -526px -88px;}#agency_sub .tab_tit span.cur em{display:block;}#agency_sub .tab_con{padding-left:271px;padding-top:30px;padding-bottom:53px;border-color:#ededed;border-width:0 1px 1px;border-style:none solid solid;}#agency_sub .tab_con_ls{padding-top:70px;}#agency_sub .tab_con h4{padding-left:32px;padding-bottom:23px;line-height:32px;font-size:18px;color:#368ee0;}#agency_sub .tab_con .input_box{padding-bottom:23px;height:37px;line-height:37px;font-size:14px;color:#333;}#agency_sub .tab_con .input_box span{float:left;width:117px;padding-right:16px;text-align:right;}#agency_sub .tab_con .input_box span b{color:#ff0000;padding:0 4px;vertical-align:middle;display:inline;}#agency_sub .tab_con .input_box input{display:block;width:286px;padding:0 5px;border:0 none;background-color:#f8f8f8;height:35px;line-height:35px;border:1px solid #e1e1e1;}#agency_sub .tab_con .input_box .select{position:relative;width:298px;height:35px;background:url(../images/temp_agency_subjec_icons.png) no-repeat 265px -159px; }#agency_sub .tab_con .input_box .select span{display:block;padding-right:30px;width:266px;height:33px;text-indent:10px;border:1px solid #e1e1e1; text-align:left;}#agency_sub .tab_con .input_box .select ul,#agency_sub .tab_con .input_box .prov_select ul,#agency_sub .tab_con .input_box .city_select ul{position:absolute;z-index:3;left:0;top:35px;display:none;max-height:120px;overflow-x:hidden;overflow-y:auto;border-style:none solid solid;border-width:medium 1px 1px;border-color:#e1e1e1;background-color:#fff;}#agency_sub .tab_con .input_box .select ul{width:296px;background-color:#fff;}#agency_sub .tab_con .prov em{margin:0 10px;}#agency_sub .tab_con .input_box .prov_select,#agency_sub .tab_con .input_box .city_select{position:relative;width:98px;height:35px;background:url(../images/temp_agency_subjec_icons.png) no-repeat 65px -159px;}#agency_sub .tab_con .input_box .prov_select span,#agency_sub .tab_con .input_box .city_select span{display:block;padding-right:18px;width:78px;height:33px;text-indent:10px;border:1px solid #e1e1e1; text-align:left;}#agency_sub .tab_con .input_box .prov_select ul,#agency_sub .tab_con .input_box .city_select ul{width:96px;background-color:#fff;}#agency_sub .tab_con .input_box li{line-height:24px;text-align:left;text-indent:10px;cursor:pointer;}#agency_sub .tab_con .input_box li:hover{background-color:#f5f5f5;}#agency_sub .tab_con .btn_box{padding-top:28px;padding-left:123px;}#agency_sub .tab_con .btn_box a{display:block;width:139px;height:44px;text-indent:-9999em;background:url(../images/temp_agency_subjec_icons.png) no-repeat -263px -115px;}#agency_sub .tab_con .btn_box a:hover{background-position:-403px -115px;}#agency_sub .apply_success{padding:183px 20px 183px 217px;}#agency_sub .apply_success_in{height:73px;padding-left:107px;background:url(../images/apply_success.png) no-repeat;}#agency_sub .apply_success_in h4{line-height:38px;font-size:18px;color:#2c2c2c;}#agency_sub .apply_success_in a{line-height:30px;font-size:14px;color:#fa5106;}.pl_40{padding-left:40px;}

自己copy到本地就可以运行了

自定义下拉列表框(2015.1.30)