使用 CSS 自定义 HTML <select>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8182562/
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
Customize HTML <select> with CSS
提问by Rui
Possible Duplicate:
Is it possible to style a select box?
可能的重复：
是否可以设置选择框的样式？
I'm searching for a way to customize a select element in my HTML code. I wanted my select to look like this:
我正在寻找一种在我的 HTML 代码中自定义选择元素的方法。我希望我的选择看起来像这样：
I want the user to be able to see an image and two texts, which represents the first element of my list. Since this is supposed to be accessed by a smartphone (Android and Blackberry), I believe the list will open in the operating system component, so I don't have to bother styling the remaining options of my select, right? What is the best way to accomplish this?
我希望用户能够看到一个图像和两个文本，它们代表我的列表的第一个元素。由于这应该通过智能手机（Android 和 Blackberry）访问，我相信该列表将在操作系统组件中打开，所以我不必费心为我选择的其余选项设置样式，对吗？实现这一目标的最佳方法是什么？
Thanks a lot in advance!
非常感谢！
回答by kasimir
I don't think you can accomplish quite as much as you want with just css styling a <select>tag. This is about how far it goes: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
我认为仅通过 css 样式<select>标记您就无法完成所需的工作。这是关于它走了多远：http: //ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
I would suggest using other elements, like <div>s to accomplish what you want, and a little bit of javascript (jQuery, MooTools) for the added effects.
我建议使用其他元素，比如<div>s 来完成你想要的，并使用一些 javascript（jQuery、MooTools）来增加效果。
回答by Jan Dragsbaek
It seems like you need a JavaScript image combobox. The article is pretty straightforward, and i believe you can customize it even further than whats written in the article. Give it a shot! :-)
看起来您需要一个 JavaScript 图像组合框。这篇文章非常简单，我相信你可以比文章中写的更进一步定制它。试一试！:-)
回答by simoncereska
I use jQuery plugin prettySelectBox, recommend it. http://abeautifulsite.net/blog/2011/01/jquery-selectbox-plugin/
我使用jQuery插件prettySelectBox，推荐它。http://abeautifulsite.net/blog/2011/01/jquery-selectbox-plugin/
回答by Alvaro Prieto
Select elements are the ones which less customization acepts, so your freedom to style them is very limited.
选择元素是较少定制接受的元素，因此您对它们进行样式设置的自由非常有限。
In order to achive what you are looking for, I suggest you to build your own select-like component using custom HTML, JavaScript and CSS.
为了实现您的目标，我建议您使用自定义 HTML、JavaScript 和 CSS 构建您自己的类似 select 的组件。
If you want to use an already existing one, I suggest you to take a look at the following links:
如果您想使用现有的，我建议您查看以下链接：
However, since what you are looking for is too specific, probably you will need to create your dropdown in your own.
但是，由于您要查找的内容过于具体，您可能需要自己创建下拉列表。
回答by dodger
Styling selects is notoriously difficult - browser vendors have not allowed for widespread custom styling on form elements.
样式选择是出了名的困难 - 浏览器供应商不允许在表单元素上广泛使用自定义样式。
One way to get around it is to use javascript, maybe with a library such as jQuery.
绕过它的一种方法是使用 javascript，也许使用 jQuery 之类的库。
There's some good answers and links to plugins on this page: Is it possible to style a select box?
此页面上有一些很好的答案和插件链接： Is it possible to style a select box?
回答by Saeed Neamati
HTML <select>tag is part of a larger set, called HTML form controls. They are different types of <input>tag, <select>tag, <textarea>. The most common known issues of HTML form elements (controls) is that, they don't have cross-browser look & feel. In other words, while a browser may animate a drop-down menu (a select element), another browser may open it up abruptly and at-once. Thus, a known web-design and development practice, is to create your custom controls, from scratchusing simple elements and JavaScript (usually jQuery). Thus, I recommend that you create it on your own, instead of trying to find out how to make what you want (and to be honest, I think what you're looking for is not possible, since nesting block-level elementsinside <option>tags are not allowed, if you want to have valid HTML).
HTML<select>标记是一个更大的集合的一部分，称为 HTML 表单控件。它们是不同类型的<input>标签、<select>标签、<textarea>. HTML 表单元素（控件）最常见的已知问题是，它们没有跨浏览器的外观和感觉。换句话说，虽然浏览器可能会为下拉菜单（一个选择元素）设置动画，但另一个浏览器可能会突然打开它。因此，一种已知的 Web 设计和开发实践是使用简单元素和 JavaScript（通常是 jQuery）从头开始创建自定义控件。因此，我建议您自己创建它，而不是试图找出如何制作您想要的东西（老实说，我认为您要寻找的东西是不可能的，因为嵌套块级元素<option>如果您想要有效的 HTML，则不允许使用内部标签）。
