仅使用类似于 Jquery UI 按钮的 CSS 样式选择框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11208302/
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
Select Box with just the CSS styling similar to Jquery UI Button
提问by John Zumbrum
I can use .button() to create beautiful submit buttons, but the rest of the elements on my page, most notably select boxes are still in the regular, ugly css styling.
我可以使用 .button() 来创建漂亮的提交按钮，但我页面上的其余元素，最显着的选择框仍然是常规的、丑陋的 css 样式。
Is there a way to hiHyman the css styling from Jquery UI Button for my select boxes?
有没有办法从 Jquery UI Button 劫持我的选择框的 css 样式？
回答by Moin Zaman
Not completely no. Select / dropdown boxes are generally Operating System and Browser dependent. You can't control it at a fine grained level.
不完全没有。选择/下拉框通常取决于操作系统和浏览器。您无法在细粒度级别控制它。
Chrome / Webkit browsers allow some styling. See this Question: How to style a <select> dropdown with CSS only without JavaScript?
Chrome / Webkit 浏览器允许一些样式。请参阅此问题：如何在没有 JavaScript 的情况下仅使用 CSS 设置 <select> 下拉列表的样式？
If you are able to use extra markup to surround the selectthen you can do some things.
如果您能够使用额外的标记来包围 ，select那么您可以做一些事情。
See: http://bavotasan.com/2011/style-select-box-using-only-css/
请参阅：http: //bavotasan.com/2011/style-select-box-using-only-css/
Otherwise you have to resort to JS solutions like
否则，您必须求助于 JS 解决方案，例如
http://cssglobe.com/post/8802/custom-styling-of-the-select-elements
http://cssglobe.com/post/8802/custom-styling-of-the-select-elements
and
和
http://www.htmlgoodies.com/beyond/css/how-to-create-custom-select-menus-with-css.html
http://www.htmlgoodies.com/beyond/css/how-to-create-custom-select-menus-with-css.html
回答by ryan0
Using jquery-ui 1.10.2, assuming you have already downloaded and installed a nice theme from themeroller:
使用 jquery-ui 1.10.2，假设您已经从 themeroller 下载并安装了一个不错的主题：
<select id="myselect">
<option> Option 1 </option>
<option> Option 2 </option>
<option> Option 3 </option>
<option> Option 4 </option>
</select>
<script type="text/javascript">
$("#myselect").menu();
</script>
Works in Chrome and Safari...
适用于 Chrome 和 Safari...
