由于原生select在各个浏览器的样式不统一，特别是在ie67下直接不可以使用样式控制，当pm让你做一个样式的时候，那是相当的痛苦。最好的办法就是使用自定义样式仿select效果。这里写了一个jquery插件，实现自定义的select（阉割了不少原生select的事件，但是最主要的都还在）
需要引用的样式：
.self-select-wrapper{ position: relative; display: inline-block; border: 1px solid #d0d0d0; width: 250px; height:40px; font-size: 14px;} div.self-select-wrapper{ /*解决ie67 块级元素不支持display:inline-block*/ *display:inline;} .self-select-wrapper .self-select-display{ display: inline-block; cursor: pointer; width:100%; height:40px; background: -moz-linear-gradient(top, #fff, #eee); background: -o-linear-gradient(top,#fff, #eee); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#eee)); filter: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#ffffff,endcolorstr=#eeeeee);} .self-select-display .self-select-text{ padding-left:10px; display: inline-block; line-height: 40px; width: 210px;} .self-select-display .self-select-arrow-down{ height:0; width:0; overflow: hidden; font-size: 0; line-height: 0; display: inline-block; vertical-align: middle; border-color:#aaa transparent transparent transparent; border-style:solid dashed dashed dashed; border-width:7px;} .self-select-wrapper .self-select-ul{ position: absolute; max-height:200px; _height:200px; border: 1px solid #ccc; background-color: #fff; top:41px; left:0px; overflow-y: auto; _overflow-y:auto !important; padding:0px; margin:0px; width: 100%; z-index:2014; display: none;} .self-select-wrapper .self-select-ul li{ list-style: none;} .self-select-ul .self-select-option{ line-height: 28px; cursor: pointer; display: block; padding-left:10px; text-decoration: none; color:#000;} .self-select-ul .self-select-option:hover,.self-select-ul .current{ background-color: #eee;}
js源码：
/** * 解决自定义select自定义样式需求 * select父级元素谨慎使用z-index */(function($){ var tpl = ''+ ''+ ''+ ''+ ''+ ''+ '
'; $.fn.selfselect = function(changehandler){ var name = $(this).attr('name'); var $selects = $(this); function getsourcedata($options) { var text = []; var value = []; $.each($options, function() { text.push($(this).html()); value.push($(this).attr('value')); }); return { text: text, value: value }; } function buildtpl($selfselect, $select) { var valuearr =[]; var textarr = []; var optiontpl = ''; var $options = $select.find('option'); var sourcedata = getsourcedata($options); valuearr = sourcedata.value; textarr = sourcedata.text; $select.hide(); $selfselect.find('.self-select-text').html(textarr[0]); $.each(textarr, function(seq, text) { optiontpl += ''+text+''; }); $selfselect.find('.self-select-ul').html(optiontpl); } function initselect() { //解决多个select问题 $.each($selects, function(i, selectel) { var $selfselect; var guid = math.floor(math.random()*100); var $select = $(selectel); var $parent = $select.parent(); if(!$select.prev().hasclass('self-select-wrapper')) { $select.before(tpl); $select.prev().addclass('select-' + guid); $selfselect = $parent.find('.select-' + guid); }else { $selfselect = $select.prev(); } buildtpl($selfselect, $select); initevent($selfselect, $select) }); } function initevent($selfselect, $select) { $selfselect.find('.self-select-display').off('click').on('click', function() { var $selfselects = $('body').find('.self-select-wrapper'); var iscliked = $(this).hasclass('clicked'); if(iscliked) { $(this).removeclass('clicked'); $selfselect.find('.self-select-ul').slideup('fast'); }else { $(this).addclass('clicked'); $selfselect.find('.self-select-ul').slidedown('fast'); } //防止z-index覆盖问题 $.each($selfselects, function(i, selectel) { $(selectel).css('z-index', 0); }); $selfselect.css('z-index', 1); }); $selfselect.find('.self-select-option').on('mousedown', function() { var text = $(this).html(); var value = $(this).attr('value'); $(this).parents('ul').slideup('fast'); $selfselect.find('.self-select-display').removeclass('clicked'); $selfselect.find('.self-select-text').html(text); $(this).addclass('current'); $(this).parent().siblings().children().removeclass('current'); //修改select的值，并触发change事件 $select.val(value); $select.trigger('change', value); }); $(document).on('mousedown', function(e) { if($(e.target).hasclass('self-select-ul') || $(e.target).parent().hasclass('self-select-display')) return; $selfselect.find('.self-select-display').removeclass('clicked'); $selfselect.find('.self-select-ul').slideup('fast'); }); $select.on('change', function(e, val) { changehandler && changehandler(val); }); } initselect(); return this; };}(jquery));
使用效果图：
第二个是之前省市联动的插件生成之后，调用自定义select生成的
自定义sleect优点：
样式完全可控 兼容ie系列浏览器 使用方便，不影响默认的change事件处理
开发中遇到的问题：
1.线性渐变
    ie下使用filter: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#ffffff,endcolorstr=#eeeeee);解决线性渐变问题，详解请参考下面的资料。
2.ie6 a 标签hover问题
    ie6不设置href属性，不会触发:hover样式
3.ie 67 块级元素display：inline-block
4.z-index层级问题
    改变处于active状态的自定select的z-index
5.css实现下三角，ie下透明问题
    设置透明部分的style值为dashed即可。
    border-style:solid dashed dashed dashed; 
如果觉得有用，可以推荐给朋友哦，小编愿意和大家共同进步。
以上就是jquery制作select自定义样式的方法，希望大家喜欢。