Html 如何在选择列表中添加图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2965971/
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 add images in select list?
提问by Mayur
I have a select list of genders.
我有一个选择的性别列表。
Code:
代码：
<select>
<option>male</option>
<option>female</option>
<option>others</option>
</select>
I want to use an image in drop down list as drop-down-icon.jpeg.
我想使用下拉列表中的图像作为 drop-down-icon.jpeg。
I want to add a button in place of drop down icon.
我想添加一个按钮来代替下拉图标。
How to do that?
怎么做？
回答by vartec
In Firefoxyou can just add background image to option:
在Firefox 中，您可以将背景图片添加到选项中：
<select>
<option style="background-image:url(male.png);">male</option>
<option style="background-image:url(female.png);">female</option>
<option style="background-image:url(others.png);">others</option>
</select>
Better yet, you can separate HTML and CSS like that
更好的是，您可以像这样分离 HTML 和 CSS
HTML
HTML
<select id="gender">
<option>male</option>
<option>female</option>
<option>others</option>
</select>
CSS
CSS
select#gender option[value="male"] { background-image:url(male.png); }
select#gender option[value="female"] { background-image:url(female.png); }
select#gender option[value="others"] { background-image:url(others.png); }
In other browsersthe only way of doing that would be using some JS widget library, like for example jQuery UI, e.g. using Selectable.
在其他浏览器中，唯一的方法是使用一些 JS 小部件库，例如jQuery UI，例如使用Selectable。
From jQuery UI 1.11, Selectmenuwidget is available, which is very close to what you want.
从 jQuery UI 1.11 开始，可以使用Selectmenu小部件，这非常接近您想要的。
回答by Tarik
My solution is to use FontAwesome and then add library images as text! You just need the Unicodes and they are found here: FontAwesome Reference File forUnicodes
我的解决方案是使用 FontAwesome，然后将库图像添加为文本！你只需要Unicodes，它们可以在这里找到：FontAwesome Reference File forUnicodes
Here is an example state filter:
这是一个示例状态过滤器：
<select name='state' style='height: 45px; font-family:Arial, FontAwesome;'>
<option value=''> All States</option>
<option value='enabled' style='color:green;'> Enabled</option>
<option value='paused' style='color:orange;'> Paused</option>
<option value='archived' style='color:red;'> Archived</option>
</select>
Note the font-family:Arial, FontAwesome;is required to be assigned in style for select like given in the example!
注意font-family:Arial, FontAwesome; 需要在样式中为 select 分配样式，例如示例中给出的！
回答by bugra ozden
You can use iconselect.js; Icon/image select (combobox, dropdown)
您可以使用 iconselect.js；图标/图像选择（组合框、下拉菜单）
Demo and download; http://bug7a.github.io/iconselect.js/
演示和下载；http://bug7a.github.io/iconselect.js/
HTML usage;
HTML 用法；
<div id="my-icon-select"></div>
Javascript usage;
Javascript 使用；
var iconSelect;
window.onload = function(){
iconSelect = new IconSelect("my-icon-select");
var icons = [];
icons.push({'iconFilePath':'images/icons/1.png', 'iconValue':'1'});
icons.push({'iconFilePath':'images/icons/2.png', 'iconValue':'2'});
icons.push({'iconFilePath':'images/icons/3.png', 'iconValue':'3'});
iconSelect.refresh(icons);
};
回答by Alvaro Montoro
You already have several answers that suggest using JavaScript/jQuery. I am going to add an alternative that only uses HTML and CSS without any JS.
您已经有几个建议使用 JavaScript/jQuery 的答案。我将添加一个仅使用 HTML 和 CSS 而没有任何 JS 的替代方案。
The basic idea is to use a set of radio buttons and labels (that will activate/deactivate the radio buttons), and with CSS control that only the label associated to the selected radio button will be displayed. If you want to allow selecting multiple values, you could achieve it by using checkboxes instead of radio buttons.
基本思想是使用一组单选按钮和标签（将激活/停用单选按钮），并使用 CSS 控件仅显示与所选单选按钮关联的标签。如果您想允许选择多个值，您可以通过使用复选框而不是单选按钮来实现。
Here is an example. The code may be a bit messier (specially compared to the other solutions):
这是一个例子。代码可能有点乱（特别是与其他解决方案相比）：
.select-sim {
width:200px;
height:22px;
line-height:22px;
vertical-align:middle;
position:relative;
background:white;
border:1px solid #ccc;
overflow:hidden;
}
.select-sim::after {
content:"▼";
font-size:0.5em;
font-family:arial;
position:absolute;
top:50%;
right:5px;
transform:translate(0, -50%);
}
.select-sim:hover::after {
content:"";
}
.select-sim:hover {
overflow:visible;
}
.select-sim:hover .options .option label {
display:inline-block;
}
.select-sim:hover .options {
background:white;
border:1px solid #ccc;
position:absolute;
top:-1px;
left:-1px;
width:100%;
height:88px;
overflow-y:scroll;
}
.select-sim .options .option {
overflow:hidden;
}
.select-sim:hover .options .option {
height:22px;
overflow:hidden;
}
.select-sim .options .option img {
vertical-align:middle;
}
.select-sim .options .option label {
display:none;
}
.select-sim .options .option input {
width:0;
height:0;
overflow:hidden;
margin:0;
padding:0;
float:left;
display:inline-block;
/* fix specific for Firefox */
position: absolute;
left: -10000px;
}
.select-sim .options .option input:checked + label {
display:block;
width:100%;
}
.select-sim:hover .options .option input + label {
display:block;
}
.select-sim:hover .options .option input:checked + label {
background:#fffff0;
}<div class="select-sim" id="select-color">
<div class="options">
<div class="option">
<input type="radio" name="color" value="" id="color-" checked />
<label for="color-">
<img src="http://placehold.it/22/ffffff/ffffff" alt="" /> Select an option
</label>
</div>
<div class="option">
<input type="radio" name="color" value="red" id="color-red" />
<label for="color-red">
<img src="http://placehold.it/22/ff0000/ffffff" alt="" /> Red
</label>
</div>
<div class="option">
<input type="radio" name="color" value="green" id="color-green" />
<label for="color-green">
<img src="http://placehold.it/22/00ff00/ffffff" alt="" /> Green
</label>
</div>
<div class="option">
<input type="radio" name="color" value="blue" id="color-blue" />
<label for="color-blue">
<img src="http://placehold.it/22/0000ff/ffffff" alt="" /> Blue
</label>
</div>
<div class="option">
<input type="radio" name="color" value="yellow" id="color-yellow" />
<label for="color-yellow">
<img src="http://placehold.it/22/ffff00/ffffff" alt="" /> Yellow
</label>
</div>
<div class="option">
<input type="radio" name="color" value="pink" id="color-pink" />
<label for="color-pink">
<img src="http://placehold.it/22/ff00ff/ffffff" alt="" /> Pink
</label>
</div>
<div class="option">
<input type="radio" name="color" value="turquoise" id="color-turquoise" />
<label for="color-turquoise">
<img src="http://placehold.it/22/00ffff/ffffff" alt="" /> Turquoise
</label>
</div>
</div>
</div>回答by jerrygarciuh
Another jQuery cross-browser solution for this problem is http://designwithpc.com/Plugins/ddSlickwhich is made for exactly this use.
此问题的另一个 jQuery 跨浏览器解决方案是http://designwithpc.com/Plugins/ddSlick，它正是为此用途而制作的。
回答by Tim
With countries, languages or currency you may use emojis.
对于国家、语言或货币，您可以使用表情符号。
Works with pretty much every browser/OS that supports the use of emojis.
几乎适用于所有支持使用表情符号的浏览器/操作系统。
select {
height: 50px;
line-height: 50px;
font-size: 12pt;
}<select name="countries">
<option value="NL"> Netherlands</option>
<option value="DE"> Germany</option>
<option value="FR"> France</option>
<option value="ES"> Spain</option>
</select>
<br /><br />
<select name="currency">
<option value="EUR">  EUR </option>
<option value="GBP"> ￡ GBP </option>
<option value="USD"> $ USD </option>
<option value="YEN"> ￥ YEN </option>
</select>回答by BBaysinger
For a two color image, you can use Fontello, and import any custom glyph you want to use. Just make your image in Illustrator, save to SVG, and drop it onto the Fontello site, then download your custom font ready to import. No JavaScript!
对于两色图像，您可以使用Fontello，并导入您想要使用的任何自定义字形。只需在 Illustrator 中制作图像，保存为 SVG，然后将其拖放到 Fontello 站点，然后下载准备导入的自定义字体。没有 JavaScript！
回答by aslam parvaiz
I tried several jquery based custom select with images, but none worked in responsive layouts. Finally i came accross Bootstrap-Select. After some modifications i was able to produce this code.
我尝试了几个基于 jquery 的自定义图像选择，但没有一个在响应式布局中工作。最后我遇到了 Bootstrap-Select。经过一些修改后，我能够生成此代码。
回答by OuzoPower
For those wanting to display an icon, and accepting a "black and white" solution, one possibility is using character entities:
对于那些想要显示图标并接受“黑白”解决方案的人，一种可能性是使用字符实体：
<select>
<option>100 €</option>
<option>89 £</option>
</select>
By extension, your icons can be stored in a custom font. Here's an example using the font FontAwesome: https://jsfiddle.net/14606fv9/2/https://jsfiddle.net/14606fv9/2/
通过扩展，您的图标可以存储在自定义字体中。这是使用字体FontAwesome的示例：https : //jsfiddle.net/14606fv9/2/ https://jsfiddle.net/14606fv9/2/
One benefit is that it doesn't require any Javascript. However, pay attention that loading the full font doesn't slow down the loading of your page.
一个好处是它不需要任何 Javascript。但是，请注意加载完整字体不会减慢页面的加载速度。
Nota bene:The solution of using a background image doesn't seem working anymore in Firefox (at least in version 57 "Quantum"):
注意：使用背景图像的解决方案在 Firefox 中似乎不再适用（至少在版本 57“Quantum”中）：
<select>
<option style="background-image:url(euro.png);">100</option>
<option style="background-image:url(pound.png);">89</option>
</select>
回答by Luan Persini
I got the same issue. My solution was a foreach of radio buttons, with the image at the right of it. Since you can only choose a single option at radio, it works (like) a select.
我遇到了同样的问题。我的解决方案是 foreach 单选按钮，其右侧有图像。由于您只能在收音机中选择一个选项，因此它的工作原理（类似于）选择。
Worket well for me. Hope it can help someone else.
对我来说工作得很好。希望它可以帮助别人。
