如何在选择列表中添加图像？
Posted
技术标签:
【中文标题】如何在选择列表中添加图像？【英文标题】：How to add images in select list? 【发布时间】：2022-01-17 13:32:05 【问题描述】：我有一个选择的性别列表。
代码：
<select>
<option>male</option>
<option>female</option>
<option>others</option>
</select>
我想使用下拉列表中的图片作为 drop-down-icon.jpeg。
我想添加一个按钮来代替下拉图标。
怎么做？
【问题讨论】：
Image in SELECT element 和 How can I put an image into select? 的重复项。 ***.com/search?q=html+select+image. 作为一般解决方案：如果可以，将您的图标作为 SVG 组合在一起，将它们导入您选择的字体到个人 Unicode 范围内，在您的<option>s 中使用该字体；从 IE 8.0 开始，一切都支持，小而简单。
【参考方案1】：
在 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>
更好的是，您可以像这样分离 HTML 和 CSS
HTML
<select id="gender">
<option>male</option>
<option>female</option>
<option>others</option>
</select>
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 小部件可用，非常接近您想要的。
【讨论】：
Firefox 不再支持上述方法了。 @RoshanaPitigala 这是真的。不过，我似乎找不到任何链接:( 此代码在 Firefox 或 Chrome 中不起作用。不支持的功能【参考方案2】：你可以使用 iconselect.js；图标/图像选择（组合框、下拉菜单）
演示和下载； http://bug7a.github.io/iconselect.js/
HTML 用法；
<div id="my-icon-select"></div>
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);
;
【讨论】：
这个插件有我见过的最奇怪的“要求”；如果您定义了<!doctype html>，CSS 和滚动功能就会中断。【参考方案3】：
我的解决方案是使用 FontAwesome，然后将库图像添加为文本！ 您只需要 Unicode，它们可以在这里找到：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>
注意 font-family:Arial, FontAwesome; 需要在样式中指定，以便像示例中给出的那样选择！
【讨论】：
此解决方案不适用于该选项，仅在选中时（笔：codepen.io/wtfgraciano/pen/YMwWqK） 它确实有效，但该功能取决于浏览器。例如，它在 Windows 中的 Chrome 上运行良好。 添加库图片作为文本是什么意思？对不起，我不太明白，你介意解释一下吗？ @RyanN1220 Fontawesome 是一个拥有迷你图片的图书馆。每个图像都有一个相应的 unicode 文本，您可以应用。请参阅答案中的链接以获取文本代码。 (fontawesome.com/cheatsheet?from=io#social-buttons) 没什么特别的，只需按照答案中的示例进行操作即可。【参考方案4】：您已经有几个建议使用 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" /> 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" /> 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" /> 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" /> 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" /> 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" /> 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" /> Turquoise
</label>
</div>
</div>
</div>【讨论】：
需要将鼠标移出才能折叠。可以通过单击而不是鼠标悬停/移动来完成吗？这可以在移动/非鼠标设备上使用吗？【参考方案5】：对于国家、语言或货币，您可以使用表情符号。
适用于几乎所有支持使用表情符号的浏览器/操作系统。
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>【讨论】：
“适用于几乎所有支持使用表情符号的浏览器/操作系统” ....除了 Windows 不支持表情符号。 ...Google Chrome 也没有，即使在 Windows 之外 :(【参考方案6】：另一个针对这个问题的 jQuery 跨浏览器解决方案是 http://designwithpc.com/Plugins/ddSlick，它正是为此用途而设计的。
【讨论】：
视图演示在我的电脑上不起作用（Linux Mint + Firefox 44） @RousseauAlexandre 检查该其他站点上的控制台我看到作者内容的 403 错误。我给他发了一条消息，因为在这里抱怨没有任何好处。 你说得对，我得到一个 my.hellobar.com/45874_63207.js not found 错误，然后 TypeError:$(...).ddslick is not a function 在 Firefox 的控制台
仅仅链接到一个库不是一个好的答案。链接到它，解释它解决问题的原因，并使用该库提供代码以实现更好的答案。见：How can I link to an external resource in a community-friendly way?【参考方案7】：
对于两色图像，您可以使用Fontello，并导入您想要使用的任何自定义字形。只需在 Illustrator 中制作您的图像，保存为 SVG，然后将其放到 Fontello 网站上，然后下载您的自定义字体即可导入。没有 JavaScript！
【讨论】：
【参考方案8】：Alvaros JS free answer 对我来说是一个很好的开始，我真的试图获得一个真正无 JS 的答案，它仍然提供了带有图像的 Select 所期望的所有功能，但遗憾的是嵌套表单是失败的。我在这里发布两个解决方案；我使用 1 行 JavaScript 的主要解决方案，以及一个完全无 JavaScript 的解决方案，它不能在另一个表单中工作，但可能对导航菜单有用。
不幸的是，代码中有一些重复，但是当您考虑 Select 的作用时，它是有道理的。当您单击一个选项时，它会将该文本复制到所选区域，即单击 4 个选项中的 1 个不会更改 4 个选项，但顶部现在将重复您单击的那个。要对图像执行此操作需要 JavaScript，或者...您复制条目。
在我的示例中，我们有一个游戏（产品）列表，其中包含版本。每个产品也可能有扩展，也可能有版本。对于每个产品，如果有多个版本，我们会为用户提供每个版本的列表，以及图像和版本特定的文本。
<h4>@Model.Name</h4>
@if (Model.Versions.Count == 1)
<div class="rich-select-option-body pl-2">
<img src="@Model.Versions[0].ImageUrl" >@Model.Versions[0].VersionName (@Model.Versions[0].Year)
</div>
else
<h5>Select the version</h5>
<div class="rich-select custom-select">
<div class="rich-select-dropdown">
@foreach (var version in Model.Versions)
<div class="rich-select-option">
<input type="radio" name="game" id="game-@version.ProductId-@version.VersionId" @if (version == Model.Versions.First()) @Html.Raw(" checked") ; />
<div class="rich-select-option-body">
<label tabindex="-1">
<img src="@version.ImageUrl" >@version.VersionName (@version.Year)
</label>
</div>
</div>
</div>
<input type="checkbox" id="rich-select-dropdown-button" class="rich-select-dropdown-button" />
<label for="rich-select-dropdown-button"></label>
<div class="rich-select-options">
@foreach (var version in Model.Versions)
<div class="rich-select-option">
<div class="rich-select-option-body">
<label for="game-@version.ProductId-@version.VersionId" tabindex="-1" onclick="document.getElementById('rich-select-dropdown-button').click();">
<img src="@version.ImageUrl" > @version.VersionName (@version.Year)
</label>
</div>
</div>
</div>
</div>
使用 JS 取消选中复选框，我们可以在一个表单上拥有多个实例。在这里，我进行了扩展以显示扩展列表，它们也具有与版本相同的逻辑。
<h5 class="mt-3">Include Expansions?</h5>
@foreach (var expansion in Model.Expansions)
<div class="form-row">
<div class="custom-control custom-checkbox w-100">
<input type="checkbox" class="expansion-checkbox custom-control-input" id="exp-@expansion.ProductId">
<label class="custom-control-label w-100" for="exp-@expansion.ProductId">
@if (expansion.Versions.Count == 1)
<div class="rich-select-option-body pl-2">
<img src="@expansion.ImageUrl" />@expansion.Name: @expansion.Versions[0].VersionName (@expansion.Versions[0].Year)
</div>
else
<div class="rich-select custom-select">
<div class="rich-select-dropdown">
@foreach (var version in expansion.Versions)
<div class="rich-select-option">
<input type="radio" name="exp-@version.ProductId" id="exp-@version.ProductId-@version.VersionId" @if (version == expansion.Versions.First()) @Html.Raw(" checked") ; />
<div class="rich-select-option-body">
<label tabindex="-1">
<img src="@version.ImageUrl" >@expansion.Name: @version.VersionName (@version.Year)
</label>
</div>
</div>
</div>
<input type="checkbox" id="rich-select-dropdown-button-@expansion.ProductId" class="rich-select-dropdown-button" />
<label for="rich-select-dropdown-button-@expansion.ProductId"></label>
<div class="rich-select-options">
@foreach (var version in expansion.Versions)
<div class="rich-select-option">
<div class="rich-select-option-body">
<label for="exp-@version.ProductId-@version.VersionId" tabindex="-1" onclick="document.getElementById('rich-select-dropdown-button-@expansion.ProductId').click();">
<img src="@version.ImageUrl" >@expansion.Name: @version.VersionName (@version.Year)
</label>
</div>
</div>
</div>
</div>
</label>
</div>
</div>
当然，这需要相当多的 CSS，我只将其包含在 this JSFiddle 中以减小这个已经很庞大的答案的大小。我已经使用 Bootstrap 4 来减少所需的数量，并允许它与其他 Bootstrap 控件和已进行的任何站点自定义相适应。
图像设置为 75 像素，但这可以在 .rich-select 和 .rich-select-option-body img 中的 5 行中轻松更改
【讨论】：
遗憾的是，我无法以某种方式发现您的“完全无 JavaScript 的解决方案”。顺便说一句：当 CSP 拒绝内联 JS（这应该是默认但不是）时，不能使用onclick 来防止一种类型的 XSS protection。【参考方案9】：
对于那些想要显示图标并接受“黑白”解决方案的人来说，一种可能性是使用字符实体：
<select>
<option>100 €</option>
<option>89 £</option>
</select>
通过扩展，您的图标可以存储在自定义字体中。 下面是一个使用字体 FontAwesome 的示例：https://jsfiddle.net/14606fv9/2/ https://jsfiddle.net/14606fv9/2/
一个好处是它不需要任何 Javascript。 但是，请注意加载完整字体不会减慢页面的加载速度。
注意事项： 使用背景图像的解决方案在 Firefox 中似乎不再有效（至少在 57 版“Quantum”中）：
<select>
<option style="background-image:url(euro.png);">100</option>
<option style="background-image:url(pound.png);">89</option>
</select>
【讨论】：
【参考方案10】：这是使用 ms-Dropdown ：https://github.com/marghoobsuleman/ms-Dropdown
数据资源是json。但是你不需要使用json。如果你愿意，你可以使用 css。
CSS 示例：https://github.com/marghoobsuleman/ms-Dropdown/tree/master/examples
Json 示例：http://jsfiddle.net/tcibikci/w3rdhj4s/6
HTML
<div id="byjson"></div>
脚本
<script>
var jsonData = [
description:'Choos your payment gateway', value:'', text:'Payment Gateway',
image:'https://via.placeholder.com/50', description:'My life. My card...', value:'amex', text:'Amex',
image:'https://via.placeholder.com/50', description:'It pays to Discover...', value:'Discover', text:'Discover',
image:'https://via.placeholder.com/50', title:'For everything else...', description:'For everything else...', value:'Mastercard', text:'Mastercard',
image:'https://via.placeholder.com/50', description:'Sorry not available...', value:'cash', text:'Cash on devlivery', disabled:true,
image:'https://via.placeholder.com/50', description:'All you need...', value:'Visa', text:'Visa',
image:'https://via.placeholder.com/50', description:'Pay and get paid...', value:'Paypal', text:'Paypal'
];
$("#byjson").msDropDown(byJson:data:jsonData, name:'payments2').data("dd");
</script>
【讨论】：
【参考方案11】：我提出了一个替代方案 当我使用 devexpress 的 dxlookup 遇到这种困难时
示例：https://js.devexpress.com/Demos/WidgetsGallery/Demo/Lookup/Templates/jQuery/Light/
【讨论】：
【参考方案12】：我尝试了几个基于 jquery 的图像自定义选择，但没有一个适用于响应式布局。最后我遇到了 Bootstrap-Select。经过一些修改后，我能够生成此代码。
Code and github repo here
【讨论】：
仅仅链接到图书馆并不是一个好的答案。链接到它，解释它解决问题的原因，并使用该库提供代码以实现更好的答案。见：How can I link to an external resource in a community-friendly way? 对这个 bootstrap/jquery 解决方案感兴趣的朋友可以看看 Adarsh 的答案：***.com/questions/33726202/…【参考方案13】：我遇到了同样的问题。我的解决方案是一个单选按钮的 foreach，图像在它的右侧。由于您只能在收音机中选择一个选项，因此它（就像）一个选择。
对我来说效果很好。
【讨论】：
a<select> 不一定用于选择单个值【参考方案14】：
更新：截至 2018 年，这似乎现在有效。在 Chrome、Firefox、IE 和 Edge 中测试
更新：是的，我改变了背景颜色，而不是图像，停止投票给我，表明你可以在这里改变风格仍然是一个有用的贡献。
<!DOCTYPE html>
<html>
<body>
<style>
select#newlocale option[value="volvo"] background-color: powderblue;
select#newlocale option[value="opel"] background-color: red;
select#newlocale option[value="audi"] background-color: green;
</style>
<select id="newlocale">
<option value="volvo"><div >Volvo</div></option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
【讨论】：
图片在哪里？ 我在示例中更改了背景颜色而不是图像，但样式选择仍然证明了这一点。 这个答案根本没有解决实际问题（“如何在选择列表中添加图像？”）。 很公平。我没有用图像测试它，我想应用样式，这就是我最终解决这个问题的方式。我假设 background-image:url(euro.png); 可以代替 background-color: green; 在我的例子中。我不打算回去测试它。 根本没有解决原始问题。以上是关于如何在选择列表中添加图像？的主要内容，如果未能解决你的问题，请参考以下文章