如何使用 CSS 3 自定义“选择”HTML 表单元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5641638/
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
How to customize a "select" HTML form element with CSS 3?
提问by Zouzouwizman
I cannot change the size of a select HTML form element without having ugly results, and totally different depending of the browser.
我无法在没有丑陋结果的情况下更改所选 HTML 表单元素的大小，并且根据浏览器的不同而完全不同。
Do you know a method like the one 37 Signals did (unfortunately only for Webkit) : http://37signals.com/svn/posts/2609-customizing-web-forms-with-css3-and-webkit
你知道像 37 Signals 那样的方法吗（不幸的是只适用于 Webkit）：http: //37signals.com/svn/posts/2609-customizing-web-forms-with-css3-and-webkit
Or any method / workaround which work on FF/safari/Chrome (and maybe IE ;-) ?
或者任何适用于 FF/safari/Chrome（可能还有 IE ;-) 的方法/解决方法？
I create a form with huge elements : easy to have huge buttons or input[text], but so far impossible to do the same with select.
我创建了一个包含巨大元素的表单：很容易有巨大的按钮或 input[text]，但到目前为止不可能用 select 做同样的事情。
Thanks !
谢谢 ！
回答by Kira M. Backes
This is sadly still not possible reliably across browsers and operating systems. Way to go is actually a javascript-based solution that emulates a select field.
遗憾的是，这仍然无法跨浏览器和操作系统可靠地实现。Way to go 实际上是一个基于 javascript 的解决方案，它模拟了一个选择字段。
回答by Dan
You can style your select box with this jQuery:
您可以使用此 jQuery 设置选择框的样式：
http://www.adamcoulombe.info/lab/jquery/select-box/
http://www.adamcoulumbe.info/lab/jquery/select-box/
It is easy to implement and degrades nicely (to default select) in browsers that do not support it (IE6).
在不支持它的浏览器（IE6）中很容易实现和降级（默认选择）。
jQuery plugin(included in download link):
jQuery 插件（包含在下载链接中）：
customSelect.jquery.js
Javascript:
Javascript：
$(document).ready(function(){
$('select').customStyle();
});
CSS:
CSS：
.customStyleSelectBox {
/* Styles For Your Select Box */
}
.customStyleSelectBox.changed {
/* You can use this if you want a different style after user has made a selection */
}
/* on the next line we add a down arrow on the right to indicate that it is a select box */
.customStyleSelectBoxInner {
background:url(canvas-list-nav-item-arrow-.gif) no-repeat center right;
}
Image preview:
图片预览：
回答by Marko
Unfortunately, CSS3 doesn't contain any extra features for styling <select>boxes. Furthermore, any attempt to style them using CSS will end up in a cross-browser chop suey mess.
不幸的是，CSS3 不包含任何用于样式<select>框的额外功能。此外，任何使用 CSS 对它们进行样式设置的尝试最终都会导致跨浏览器杂乱无章。
The way to go would be Javascript/jQuery, here's a jQuery onethat I've used in the past. If a user has Javascript turned off, it'll just default to a normal <select>element.
要走的路将是 Javascript/jQuery，这是我过去使用过的jQuery。如果用户关闭了 Javascript，它只会默认为普通<select>元素。
Feel free to browse around for a solution that meets your needs, you might need a vanilla Javascript one if you're not already using jQuery.
随意浏览满足您需求的解决方案，如果您还没有使用 jQuery，您可能需要一个普通的 Javascript。
回答by user2490687
To hide select arrow you can use that workaround
要隐藏选择箭头，您可以使用该解决方法
select {
overflow:hidden;
width: 120%;
}
