我有一个选择的性别列表。
代码：
<select>
<option>male</option>
<option>female</option>
<option>others</option>
</select>
我想使用下拉列表中的图片作为 drop-down-icon.jpeg。
我想添加一个按钮来代替下拉图标。
怎么做？
【问题讨论】：
<option>s 中使用该字体；从 IE 8.0 开始，一切都支持，小而简单。
在 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 小部件可用，非常接近您想要的。
【讨论】：
你可以使用 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 和滚动功能就会中断。
我的解决方案是使用 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; 需要在样式中指定，以便像示例中给出的那样选择！
【讨论】：
您已经有几个建议使用 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>【讨论】：
对于国家、语言或货币，您可以使用表情符号。
适用于几乎所有支持使用表情符号的浏览器/操作系统。
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>【讨论】：
另一个针对这个问题的 jQuery 跨浏览器解决方案是 http://designwithpc.com/Plugins/ddSlick，它正是为此用途而设计的。
【讨论】：
$(...).ddslick is not a function 在 Firefox 的控制台
对于两色图像，您可以使用Fontello，并导入您想要使用的任何自定义字形。只需在 Illustrator 中制作您的图像，保存为 SVG，然后将其放到 Fontello 网站上，然后下载您的自定义字体即可导入。没有 JavaScript！
【讨论】：
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" alt="">@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" alt="">@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" alt=""> @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" alt="">@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" alt="">@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 行中轻松更改
【讨论】：
onclick 来防止一种类型的 XSS protection。
对于那些想要显示图标并接受“黑白”解决方案的人来说，一种可能性是使用字符实体：
<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>
【讨论】：
这是使用 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>
【讨论】：
我提出了一个替代方案 当我使用 devexpress 的 dxlookup 遇到这种困难时
示例：https://js.devexpress.com/Demos/WidgetsGallery/Demo/Lookup/Templates/jQuery/Light/
【讨论】：
我尝试了几个基于 jquery 的图像自定义选择，但没有一个适用于响应式布局。最后我遇到了 Bootstrap-Select。经过一些修改后，我能够生成此代码。
【讨论】：
我遇到了同样的问题。我的解决方案是一个单选按钮的 foreach，图像在它的右侧。由于您只能在收音机中选择一个选项，因此它（就像）一个选择。
对我来说效果很好。
【讨论】：
<select> 不一定用于选择单个值
更新：截至 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>
【讨论】：