jquery制作属于自己的select自定义样式

由于原生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优点：

样式完全可控
兼容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自定义样式的方法，希望大家喜欢。