97
我有选择性别列表。如何在选择列表中添加图片
代码：
<select>
<option>male</option>
<option>female</option>
<option>others</option>
</select>
我想在下拉列表中的下拉-icon.jpeg使用的图像。
我想添加一个按钮来代替下拉图标。
如何做到这一点？
A
回答
146
在火狐你可以添加背景图片的选项：
<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>
更重要的是，你可以像
HTML
<select id="gender">
<option>male</option>
<option>female</option>
<option>others</option>
</select>
单独的HTML和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); }
在其它的浏览器做将被使用一些JS部件库，像例如jQuery UI的唯一途径，例如使用Selectable。
从jQuery UI 1.11，Selectmenu小工具可用，这是非常接近你想要的。
+17
2015年你有没有W3C有效的解决方案？不重新实现选择框？ – 2015-05-16 20:58:55
+6
2017年如何？仍然没有解决办法 – 2017-04-21 11:23:42
+0
https://www.sitepoint.com/13-jquery-selectboxdrop-down-plugins/ – Stefan 2017-05-25 14:04:51
13
另一个针对此问题的jQuery跨浏览器解决方案是http://designwithpc.com/Plugins/ddSlick，它正是用于此用途。
+2
视图演示不适用于我的电脑（Linux Mint + Firefox 44） – RousseauAlexandre 2016-08-27 12:08:25
+0
@RousseauAlexandre检查该另一个站点上的控制台我看到作者内容的403错误。我给他发了一条消息，因为在这里抱怨不会有任何好处。 – jerrygarciuh 2016-08-27 17:07:00
+0
你是对的，我得到了* http：//my.hellobar.com/45874_63207.js*未找到错误，然后* TypeError：'$（...）.ddslick'不是Firefox中的函数*控制台 – RousseauAlexandre 2016-08-28 16:00:14
25
您可以使用iconselect.js;图标/图像选择（组合框，下拉框）
演示和下载; http://bug7a.github.io/iconselect.js/
HTML使用;
<div id="my-icon-select"></div>
Javascript usage;
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);
};
+15
这个插件有我见过的最奇怪的“要求”;如果定义了<！doctype html>'，CSS和滚动功能会中断。 – 2015-01-30 14:32:16
0
我得到了同样的问题。我的解决方案是单选按钮的foreach，右边是图片。既然你只能在收音机上选择一个选项，它就像一个选择。
工作适合我。希望它可以帮助别人。
+2
请分享一些代码 – 2014-08-13 04:32:23
+1
'
2
编辑
这个答案一直在这里两年多了。我认为现在不再是最好的选择。在GitHub上进行简单的Google搜索会为您带来许多选择。
2017年11月9日
免费的轻量级jQuery插件，它允许您创建一个自定义下拉用图像和描述。
+0
该页面上的任何示例似乎都不适用于Chromium 52.0.2743.116。 – zrajm 2016-11-18 10:02:56
+0
只是链接到图书馆不是一个好的答案。链接到它，解释为什么它解决了这个问题，并提供使用库的代码，这样做会得到更好的答案。请参阅：[**如何以社区友好的方式链接到外部资源？]（https://meta.stackexchange.com/questions/94022/how-can-i-link-to-an-外部资源在社区友好方式） – 2017-01-01 17:16:49
+0
ddSlick演示使用来自DropBox帐户的内容，并且示例jpgs不存在或不可访问。 （即从Dropbox 403错误。） – JasonInVegas 2017-03-15 19:01:29
10
您已经有几个建议使用JavaScript/jQuery的答案。我将添加一个仅使用HTML和CSS而没有任何JS的替代方案。
其基本思想是使用一组单选按钮和标签（将激活/关闭单选按钮），并通过CSS控件仅显示与所选单选按钮关联的标签。如果你想允许选择多个值，你可以通过使用复选框而不是单选按钮来实现。
这里是一个例子。该代码可能会有点混乱（特别是相对于其他的解决方案）：
.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>
1
我试了几个基于jQuery的定制与图像选择，但没有在响应的布局工作。最后我来到了Bootstrap-Select。经过一些修改后，我能够生成此代码。
+5
只是链接到图书馆不是一个好的答案。链接到它，解释为什么它解决了这个问题，并提供使用库的代码，这样做会得到更好的答案。请参阅：[**如何以社区友好的方式链接到外部资源？]（https://meta.stackexchange.com/questions/94022/how-can-i-link-to-an-外部资源在社区友好的方式） – 2017-01-01 17:18:57
13
我的解决方案是使用FontAwesome，然后添加库图片文字！ 你只需要在统一码和他们在这里找到：FontAwesome Reference File forUnicodes
下面是一个例子状态过滤：
<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!
+2
谢谢，非常聪明！ – Salketer 2017-01-30 10:36:53
+1
这正是我想要做的！我真的不想实现另一个js插件 - 所以这是完美的，因为我已经在我的网站中使用FontAwesome图标。 – 2017-06-06 17:14:31
0
对于那些想要显示的图标，并接受了“黑与白”解决方案，一种可能性是使用字符实体：
<select>
<option>100 €</option>
<option>89 £</option>
</select>
通过扩展，您的图标可以存储在自定义字体中。 下面是使用的字体FontAwesome一个例子：https://jsfiddle.net/14606fv9/2/ https://jsfiddle.net/14606fv9/2/
一个好处是，它不需要任何JavaScript。 但是，请注意，加载完整字体不会减慢加载页面的速度。
诺塔好处： 使用背景图像的溶液似乎并不在Firefox工作了（至少在版本57“量子”）：
<select>
<option style="background-image:url(euro.png);">100</option>
<option style="background-image:url(pound.png);">89</option>
</select>
相关问题
- 1. 如何在选项卡片段中添加列表视图
- 2. 将图片添加到图片箱中的图片列表
- 3. 如何在选择列表中添加限制
- 4. 添加图片在下拉列表
- 5. 如何在视图表中添加列？
- 6. 如何在VBA，Excel中复制和选择图表，图片等
- 7. 添加列选择*
- 8. 将图片添加到一个单选按钮列表在ASP.Net
- 9. 如何在列表视图中添加三态复选框
- 10. 在选项中添加图片
- 11. 如何将日期选择器添加到下拉列表中
- 12. 如何向Salesforce中的选择列表添加更多值？
- 13. 如何为下拉列表框添加'请选择...'选项
- 14. 如何在Initializer.cs中添加图片C＃
- 15. 如何在Pelican中添加图片？
- 16. 如何在JavaScript中添加图片？
- 17. django如何在JSONfield中添加图片？
- 18. 如何在UITableViewCell中添加图片
- 19. 如何在Tkinter中添加图片？
- 20. 如果不在集合中，然后添加到选择列表
- 21. 如何在javascript中添加选择
- 22. 如何在谷歌图表中添加图片
- 23. 如何在下拉列表中选择选项添加文本框
- 24. html;如何将选择下拉列表添加到表格
- 25. 如何添加图片到图片？
- 26. 如何将图像弹出窗口添加到html选择下拉列表中
- 27. 将图片添加到列表
- 28. 如何添加选择器视图programmiticaly的图像名称列表
- 29. 在表中添加图片mysql
- 30. 添加 - 从列表中选择一个下拉列表
[在SELECT元件图像]的重复（http://stackoverflow.com/questions/1697996/image-in-select-element）和[我怎样才能把图像放入选择？]（http://stackoverflow.com/questions/2524953/how-can-我 - 把 - 的图像，为选择）。http://stackoverflow.com/search?q=html+select+image。 – 2010-06-03 12:53:17
会更积极。堆栈溢出社区是一个友好的。 – think123 2012-06-07 09:29:55
作为一个通用的解决方案：如果可以的话，把你的图标合并为SVG，将它们导入你选择的字体到个人Unicode范围，在你的'