jQuery定制自己的自定义样式。
因为自然选择没有在不同的浏览器不同的风格，特别是在IE67，你不能直接使用样式控制。当PM让你做一个样式时，这是相当痛苦的。最好的方法是使用自定义样式来模仿选择效果。这里有一个jQuery插件，实现了自定义选择（一些本地选择事件的阉割，但最重要的还是）需要引用的样式：
自选择包装{
职位：相对；
显示：内联块；
边境：1px solid # d0d0d0；
宽度：250px；
身高：40px；
字体大小：14px；
}
div.self-select-wrapper {
解决IE67 /块级元素不支持显示：内联块* /
*显示：内联；
}
自选择包装器。自选择显示{
显示：内联块；
光标：指针；
宽度：100%；
身高：40px；
背景：-moz线性梯度（顶部，# FFF，# EEE）；
背景：- o-linear-gradient（顶部，# FFF，# EEE）；
背景：-webkit-gradient（线性的，0%，0%，0%，100%，从（# FFF），以（# EEE））；
过滤器：ProgID：DXImageTransform.Microsoft.Gradient（梯度型= 0，startcolorstr = # ffffff，endcolorstr = # eeeeee）；
}
自我选择显示。自动选择文本{
左：10px填充；
显示：内联块；
行高：40px；
宽度：210px；
}
自我选择显示。自选择箭头向下{
身高：0；
宽度：0；
溢出：隐藏；
字体大小：0；
线高度：0；
显示：内联块；
垂直对齐：中间；
边框颜色：# AAA透明透明；
边框样式：实心虚线虚线；
边框宽度：7px；
}
自选择包装器。
位置：绝对；
马克斯身高：200px；
_height:200px;
边境：1px solid # CCC；
背景颜色：# FFF；
上图：41px；
左：0px；
overflow-y：汽车；
_overflow-y：汽车！重要；
填料：0px；
保证金：0px；
宽度：100%；
Z指数：2014；
显示：无；
}
self-select-wrapper.self-select-ul李{。
列表样式：无；
}
自我选择UL自我选择选项{
行高：28px；
光标：指针；
显示块；
左：10px填充；
文字装饰：无；
颜色：# 000；
}
自选择UL：自选选项：悬停，
自我选择UL当前{
背景颜色：# Eee；
}
js源代码：
*解析自定义选择自定义样式要求
*选择父元素谨慎使用z-index
* /
（函数（$）{）
var =+
+
+
+
+
+
'；
美元。fn.selfselect =功能（changehandler）{
变量名= $（this）。Attr（'name'）；
选择$ = $（这个）；
功能getsourcedata（美元期权）{
var text { }；
var值{ }；
$（$选项，函数（）{（）{
Text.push（$（this）。Html（））；
Value.push（$（this）。Attr（币值的））；
}）；
返回{
文本：文本，
价值：价值
}；
}
功能buildtpl（selfselect美元，美元选择）{
无功valuearr = { }；
无功textarr = { }；
无功optiontpl =；
电邮选项= select.find美元（'option'）；
VaR数据= getsourcedata（$选项）；
valuearr = sourcedata.value；
textarr = sourcedata.text；
select.hide美元（）；
selfselect.find美元（'。自我选择文本），Html（textarr { 0 }）；
美元。每个（textarr，功能（SEQ，文本）{
optiontpl =+文字+；
}）；
selfselect.find美元（'。自我选择UL）Html（optiontpl）；
}
功能initselect（）{
解决多重选择问题。
美元。每（$选择功能（我selectel）{
VaR selfselect美元；
VaR的GUID = math.floor（Math.random）*（100）；
选择= $（var $ selectel）；
VaR母= select.parent美元（美元）；
如果（！select.prev美元（）。HasClass（'self-select-wrapper '））{
select.before美元（TPL）；
select.prev美元（）。AddClass（'select -+ GUID）；
selfselect = $（美元parent.find '选择' + GUID）；
{ }人
selfselect = select.prev美元（美元）；
}
buildtpl（selfselect美元，美元的选择）；
initevent（selfselect美元，美元的选择）
}）；
}
功能initevent（selfselect美元，美元选择）{
selfselect.find美元（'。自我选择显示的），关闭（听到咔哒声），（听到咔哒声，函数（））{
selfselects = $（var $ 'body）。找到（'。自我选择包装）；
无功iscliked =美元（这）HasClass（'clicked）；
如果（iscliked）{
$（这）RemoveClass（'clicked）；
selfselect.find美元（'。自我选择UL）SlideUp（'fast）；
{ }人
$（这）AddClass（'clicked）；
selfselect.find美元（'。自我选择UL）SlideDown（'fast）；
}
防止 / / z-index覆盖问题
美元。每（$ selfselects，功能（我selectel）{
（selectel美元）。Css（'z-index '，0）；
}）；
selfselect.css美元（'z-index '，1）；
}）；
selfselect.find美元（'。自我选择选项），（'mousedown，函数（）{（）{
Html（）；
VaR值= $（this）。Attr（币值）；
$（这）。父母（'ul）。SlideUp（'fast）；
selfselect.find美元（'。自我选择显示的），RemoveClass（'clicked）；
selfselect.find美元（'。自我选择文本），Html（文本）；
$（这）AddClass（当前的）；
$（这）。父母兄弟姐妹（），（），（）的孩子。RemoveClass（当前的）；
更改选择值，该值触发更改事件
select.val美元（价值）；
select.trigger美元（‘变'，值）；
}）；
$（document），（'mousedown功能（e）{ {）
如果（$（e.target）。HasClass（'self-select-ul）| | $（e.target）。父（HasClass）返回（'self-select-display '））；
selfselect.find美元（'。自我选择显示的），RemoveClass（'clicked）；
selfselect.find美元（'。自我选择UL）SlideUp（'fast）；
}）；
select.on美元（‘变'，功能（E，瓦迩）{
ChangeHandler changeHandler（Val）；
}）；
}
initselect（）；
返回此；
}；
}（jQuery）；
使用效果图：
第二种方法是调用自定义选项来生成以前省市所生成的插件。
自定义sleect优势：
这种风格是完全可控的。
兼容IE系列浏览器
易于使用而不影响默认更改事件处理
发展中遇到的问题：
1。线性梯度
IE过滤器：ProgID：DXImageTransform.Microsoft.Gradient（梯度型= 0，startcolorstr = # ffffff，endcolorstr = # eeeeee）是用来解决线性梯度问题。详情请参阅以下资料。
2.ie6标签悬停问题
IE6不设置href属性并不触发：悬浮式
3.ie 67块元素显示：内联块
4.z-index等级问题
改变z-index的自主选择在活跃状态
下三角5.css实施，即透明度
透明部分的样式值为虚线。
边框样式：实心虚线虚线；
如果有用的话，你可以推荐给你的朋友，小编辑愿意和你一起进步。
以上是jQuery定制自定义样式的方式，希望您喜欢。