由于原生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自定义样式的方法，希望大家喜欢。