如何在选择列表中添加图像？

我有一个性别选择列表。

码：

<select>
<option>male</option>
<option>female</option>
<option>others</option>
</select>  

我想使用下拉列表中的图像作为drop-down-icon.jpeg。

我想添加一个按钮代替下拉图标。

怎么做？

在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小部件，它非常接近您想要的。

我的解决方案是使用FontAwesome，然后将库图像添加为文本！您只需要Unicode，并且可以在这里找到它们：Unicode的FontAwesome参考文件

这是一个状态过滤器示例：

<select name='state' style='height: 45px; font-family:Arial, FontAwesome;'>
<option value=''>&#xf039; &nbsp; All States</option>
<option value='enabled' style='color:green;'>&#xf00c; &nbsp; Enabled</option>
<option value='paused' style='color:orange;'>&#xf04c; &nbsp; Paused</option>
<option value='archived' style='color:red;'>&#xf023; &nbsp; Archived</option>
</select>

注意font-family：Arial，FontAwesome; 必须按照示例中的说明指定样式以进行选择！

您可以使用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);

    };

您已经有了一些建议使用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>

针对此问题的另一个jQuery跨浏览器解决方案是http://designwithpc.com/Plugins/ddSlick，它正是为此用途而设计的。

对于国家，语言或货币，您可以使用表情符号。

几乎可以与支持使用表情符号的所有浏览器/操作系统一起使用。

select {
 height: 50px;
 line-height: 50px;
 font-size: 12pt;
}

<select name="countries">
    <option value="NL">🇳🇱&emsp;Netherlands</option>
    <option value="DE">🇩🇪&emsp;Germany</option>
    <option value="FR">🇫🇷&emsp;France</option>
    <option value="ES">🇪🇸&emsp;Spain</option>
</select>

<br /><br />

<select name="currency">
    <option value="EUR">🇪🇺&emsp;€&emsp;EUR&emsp;💶</option>
    <option value="GBP">🇬🇧&emsp;£&emsp;GBP&emsp;💷</option>
    <option value="USD">🇺🇸&emsp;$&emsp;USD&emsp;💵</option>
    <option value="YEN">🇯🇵&emsp;¥&emsp;YEN&emsp;💴</option>
</select>

对于两色图像，可以使用Fontello，并导入要使用的任何自定义字形。只需在Illustrator中制作图像，保存到SVG，然后将其拖放到Fontello网站上，然后下载准备导入的自定义字体即可。没有JavaScript！

我尝试了几种基于jquery的带有图像的自定义选择，但是没有一种在响应式布局中起作用。最后，我遇到了Bootstrap-Select。经过一些修改，我能够产生此代码。

代码和github仓库在这里

对于那些想要显示图标并接受“黑白”解决方案的用户，一种可能性是使用字符实体：

   <select>
      <option>100 &euro;</option>
      <option>89 &pound;</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>

Alvaros JS免费答案对我来说是一个不错的开始，我真的试图获得一个真正的免费JS答案，该答案仍然提供了Select带有图像的所有功能，但不幸的是嵌套表格是失败的。我在这里发布两个解决方案；我的主要解决方案使用1行JavaScript，以及完全不使用JavaScript的解决方案，该解决方案无法在另一种形式下运行，但可能对导航菜单很有用。

不幸的是，代码中有一些重复，但是当您考虑Select的意义时，它才有意义。当您单击一个选项时，它将文本复制到所选区域，即单击4个选项中的1个不会更改4个选项，但是顶部将重复您单击的那个。要对图像执行此操作，将需要JavaScript，orrrr ...您重复输入。

在我的示例中，我们列出了具有版本的游戏（产品）。每个产品可能还具有扩展版本，也可以具有版本。对于每个产品，如果有多个版本，我们会为用户提供每个版本的列表，以及图像和特定于版本的文本。

<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，我仅将其包含在此JSFiddle中以减小此已经很大的答案的大小。我使用了Bootstrap 4来减少所需的数量，并使其与其他Bootstrap控件和已进行的任何站点自定义匹配。

图像设置为75px，但是可以轻松地在.rich-select和中的5行中进行更改.rich-select-option-body img

我有同样的问题。我的解决方案是foreach单选按钮，图像在右侧。由于您只能在广播中选择一个选项，因此它可以像选择一样工作。

对我来说很好。希望它可以帮助别人。

这正在使用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>

更新：从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>