由于原生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 = '<div class="self-select-wrapper">'+ '<span class="self-select-display">'+ '<span class="self-select-text"></span>'+ '<i class="self-select-arrow-down"></i>'+ '</span>'+ '<ul class="self-select-ul"></ul>'+ '</div>'; $.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 += '<li><a class="self-select-option" href="#" value="'+valueArr[seq]+'">'+text+'</a></li>'; }); $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優點：
開發中遇到的問題：
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自定義樣式的方法，希望大家喜歡。
新聞熱點
疑難解答
