由于原生挑选在各个浏览器的样式不统一，特别是在IE67下直接不可以使用样式控制，当首相让你做一个样式的时候，那是相当的痛苦。最好的办法就是使用自定义样式仿挑选效果。这里写了一个jquery插件，实现自定义的选择（阉割了不少原生挑选的事件，但是最主要的都还在)需要引用的样式：自选择包装器{相对位置：显示器：内联块；border: 1px实心# d0d 0；宽度： 250像素；高度：40 pxfont-size : 14px} div.self-select包装{ /*解决IE67块级元素不支持显示：内联-块*/*显示：内联；} .自我选择包装。自选择显示{ display : inline-block；光标：指针；宽度：100%;高度：40 px背景：-moz-线性梯度（顶部、#fff、# eee)；背景：-o-线性梯度（顶部、#fff、# eee)；背景：-网络套件-渐变（线性，0% 0%,0% 100%,从(#fff)到(# eee))；过滤器： progid : maximagettransform .微软。渐变(渐变类型=0，startColorStr=#ffffff，endColorStr=# eeee }。自我选择-显示。自选文本{左填充：10 px显示器：内联块；线高： 40px宽度： 210 px} .自我选择-显示。自我选择-向下箭头{ height:0宽度：0;飞越：隐藏；font-size : 0；线高： 0;显示器：内联块；垂直对齐： 中间；边框-color:#aaa透明透明透明；边框样式：实线虚线虚线；边框宽度：7 px} .自我选择包装。自选-ul {位置：绝对值；最大高度：200 px_ height :200 pxborder : 1px固体# ccc背景-color : # fff；top:41pxleft:0px溢出-y:自动；_溢出-y:auto！重要；padd :0 pxmargin :0 px宽度： 100%;z指数：2014;显示器：无；} .自我选择包装。自选-ul Li {列表式：无；} .自我选择。自选选项{行高： 28px光标：指针；显示器：块；填充-左侧：10 px文本装饰：无；color: # 000}。自我选择。自选选项：悬停。自我选择。当前{背景色： # eee}js源码：

/** * 解决自定义挑选自定义样式需求*选择父级元素谨慎使用z-index */(函数($){ var TPL=' div class=' self-self-wrapper ' ' ' span class=' self-display ' ' ' span class=' self-text '/span ' ' I class=' self-self-arrow-down '/I ' '/span ' ' ul class=' self-ul '/ul ' '/div '；$ .fn。self select=function(ChangeHandler){ var name=$(this).attr(' name ')；var $ select=$(this)；函数getSourceData($ options){ var text=[]；定义变量值=[];$.每个($options，function() { text.push($(this)).html())；value.push($(this).attr(' value ')；});返回{ text: text，值： value }；}函数buildTpl($selfSelect，$ select){ var值arr=[]；var TextArr=[]；var option TPL=var $ options=$ select。find(' option ')；var sourceData=getSourceData($ options)；值arr=源数据。价值；textArr=sourceData.text$ select。hide()；$selfSelect.find ' .自我选择文本')。html(TextArr[0])；$.每一个(textArr，function(seq，text){ option TPl=' lia class=' self-self-option ' href=' # ' value=' ValueArr[seq]' ' text '/a/Li '；});$selfSelect.find ' .自行选择-ul ').html(选项TPl)；}函数initSelect() { //解决多个挑选问题$.每个($ selects，function(i，SelectEl){ var $ self select；var guid=数学。地板(数学。random()* 100)；var $ select=$(SelectEl)；var $ parent=$ select。parent()；if(！$select.prev().有类(' self-select-wrapper '){ $ select。之前(第三方物流)；$select.prev().addCLaSS(' select-' guid)；$selfSelect=$parent.find ' .选择"-guid ")；} else { $ self select=$ select。prev()；} buildTpl($selfSelect，$ select)；initEvent($selfSelect，$ select)})；}函数initEvent($selfSelect，$select) { $selfSelect.find(' .自我选择-显示')。关闭("点击")。on('click '，function(){ var $ self selections=$(' body ').查找('。自选择包装器');var isclid=$(this).有类(' clicked ')；if(is clained){ $(this).removeClass(“”已单击');$selfSelect.find ' .自行选择-ul ').向上滑动("快速");}else { $(this).add CLaSS(' clicked ')；$selfSelect.find ' .自行选择-ul ').向下滑动("快速");} //防止z指数覆盖问题$.每个($ selfSelects，function(i，selectEl) { $(selectEl)).css('z-index '，0)；});$selfSelect.css('z-index '，1)；});$selfSelect.find ' .自我选择选项')。on('mousedown '，function() { var text=$(this).html()；定义变量值=$(这个).attr(' value ')；$(这个)。父母(' ul ').向上滑动("快速");$selfSelect.find ' .自我选择-显示')。removeClass(“”已单击');$selfSelect.find ' .自我选择文本')。html(文本);$(这个)。添加CLaSS(' current ')；$(这个)。父项()。兄弟姐妹()。儿童()。removeClass(“”当前');//修改挑选的值，并触发变化事件$select.val(值);$select.trigger('change '，value)；});$(文档)。打开('鼠标向下'，函数{ if($(e.target)).has CLaSS(' self-select-ul ')| | $(e . target).父项()。hasClass(“自我选择-显示”)返回；$selfSelect.find ' .自我选择-显示')。removeClass(“”已单击');$selfSelect.find ' .自行选择-ul ').向上滑动("快速");});$select.on('change '，function(e，val){ change handler change handler(val)；});} init select()；归还这个；};}(jQuery))；使用效果图：

第二个是之前省市联动的插件生成之后，调用自定义挑选生成的

自定义光滑优点：

样式完全可控兼容工业管理学(工业工程)系列浏览器使用方便，不影响默认的变化事件处理开发中遇到的问题：1.线性渐变工业管理学(工业工程)下使用过滤器： progid : maximagettransform .微软。渐变(渐变类型=0，startColorStr=#ffffff，endColorStr=# eeeeee解决线性渐变问题，详解请参考下面的资料。2.IE6 A标签盘旋问题IE6不设置href属性，不会触发：悬停样式3.IE 67块级元素显示：内嵌块4.z索引层级问题改变处于活跃的状态的自定挑选的z-index5.css实现下三角，IE下透明问题设置透明部分的风格值为虚线即可边框样式：实线虚线虚线；如果觉得有用，可以推荐给朋友哦，小编愿意和大家共同进步。

以上是jquery如何制作select自定义样式。希望大家喜欢。