jQuery 为跨浏览器功能设置选择菜单样式的正确方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15508154/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
The correct way of styling a select menu for cross browser functionality
提问by AndrewS
I came across this problem with a select menu, it's about styling it with the help of CSS & Jquery. By now, I managed to get this result, which I really like it:
我在选择菜单时遇到了这个问题，它是关于在 CSS 和 Jquery 的帮助下对其进行样式设置的。到现在为止，我设法得到了这个结果，我真的很喜欢它：
till now it works perfect in mozila, opera, chrome, IE7+.
到目前为止，它在 mozila、opera、chrome、IE7+ 中都能完美运行。
This is the source which i have at the moment:
这是我目前拥有的来源：
HTML:
HTML：
<select class="styled" name="">
<option>Select title</option>
<option>Mr.</option>
<option>Mrs.</option>
<option>Miss.</option>
</select>
CSS:
CSS：
select {
border: 1px solid #d6d8db;
background-color: #ecedee;
text-transform: uppercase;
color: #47515c;
padding: 12px 10px 12px 10px;
width: auto;
cursor: pointer;
margin-bottom: 10px;
}
select > option {
text-transform: uppercase;
padding: 5px 0px;
}
.customSelect {
border: 1px solid #d6d8db;
background-color: #ecedee;
text-transform: uppercase;
color: #47515c;
padding: 12px 10px 12px 10px;
margin-bottom: 10px;
}
.customSelect.changed {
background-color: #f0dea4;
}
.customSelectInner {
background:url(../images/select_arrows.png) no-repeat center right;
}
The jQuery is composed from two parts: - the plugin - and the control code
jQuery 由两部分组成： - 插件 - 和控制代码
This can be viewd in the FIDDLE that i just created: http://jsfiddle.net/s6jGW/1/
这可以在我刚刚创建的 FIDDLE 中查看：http: //jsfiddle.net/s6jGW/1/
Please note there is "External Resources" on the left.
请注意左侧有“外部资源”。
What I want to achieve
我想要达到的目标
The drop down I want to style it so that it will look approximately like in the image (I mean those options like - height - padding - on hover:
I don't want the "SELECT TITLE" to be as a selection option, it must be only the title of the select box. in this fiddle you can see the it is as a option too. http://jsfiddle.net/s6jGW/1/
Probebly most important, I AM LOOKING FOR CROSS BROWSER SOLUTION.
我想设置下拉菜单的样式，使其看起来与图像中的大致相同（我的意思是那些选项，例如 - 高度 - 填充 - 悬停时：
我不希望“SELECT TITLE”作为选择选项，它必须只是选择框的标题。在这个小提琴中，您也可以看到它也是一个选项。http://jsfiddle.net/s6jGW/1/
可能最重要的是，我正在寻找跨浏览器解决方案。
Thank you in advance
先感谢您
回答by bfavaretto
The correct way of styling a select menu for cross browser functionality
为跨浏览器功能设置选择菜单样式的正确方法
Give up, there is no cross-browser way to style select and option elements. You'll need to replace them with your own, HTML-based controls.
放弃吧，没有跨浏览器的方式来设置选择和选项元素的样式。您需要将它们替换为您自己的基于 HTML 的控件。
But, if you want to insist (and probably give up on older browsers), the following links might help:
但是，如果您想坚持（并且可能会放弃旧浏览器），以下链接可能会有所帮助：
