logo标签列表

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

htmlcss
203

我有一个性别选择列表。

代码：

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

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

我想在下拉列表中添加一个按钮以替代下拉图标。

如何实现这个目标？

9
这是需要翻译的内容：duplicate of Image in SELECT element and How can I put an image into select?. http://stackoverflow.com/search?q=html+select+image.这些内容讨论了在HTML的<select>元素中如何添加图片。链接提供了一些相关的讨论和解决方案，可以帮助读者更好地理解如何实现此功能。 - Andy E
6
一般解决方案是：如果可以的话，将您的图标制作为SVG格式，导入到您选择的字体中的个人Unicode范围内，然后在您的<option>中使用该字体。这种方法被IE 8.0及以上版本支持，大小小而简单易用。 - user719662
15个回答
203

在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

=>

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小部件可用，非常接近您想要的内容。

30
Firefox不再支持上述方法。 - Roshana Pitigala
18
这段代码无法在Firefox或Chrome中运行。该功能不受支持。 - Surya R Praveen
45

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

适用于几乎所有支持使用表情符号的浏览器/操作系统。

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>

21
几乎适用于支持使用表情符号的所有浏览器/操作系统，但是Windows不支持表情符号旗帜。 - skomisa
5
谷歌浏览器也不行，即使在Windows之外 :( - Piskvor left the building
3
三年半过去了，但在Windows上显示表情符号国旗仍然没有解决方案，除了Firefox以外。因此，除非您在Windows上使用Firefox，否则上面的“国家”列表中的旗帜将被呈现为其相关的区域指示符号。例如，“法国”的条目将呈现为“FR”，而不是法国国旗等。 - skomisa
1
这会破坏键盘导航，如果您键入要选择的值的前几个字母（顺便说一下，似乎这种标准行为是基于选项文本而不是选项值属性的）。 - Big_Boulard
33

我的解决方案是使用Font Awesome，然后将库图标作为文本添加，可以直接在HTML中使用Unicode。

您只需要获取所需图标的Unicode值，这些值都可以在此处找到：Font Awesome完整的图标列表，包括Unicode

显示如何单击以复制给定图标的Unicode的图片

这是一个示例状态筛选器：

<select name='state' style='height: 45px; font-family:Arial, Font Awesome;'>
  <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;。

1
这个解决方案只在选中时起作用，而不适用于选项（笔：https://codepen.io/wtfgraciano/pen/YMwWqK）。 - graciano
它确实可以工作，但该功能取决于浏览器。例如，在Windows上的Chrome上运行良好。 - Tarik
你说的添加库图像作为文本是什么意思？抱歉，我不太明白，请您能否解释一下？ - RyanN1220
1
@RyanN1220 Fontawesome是一个包含小图像的库。每个图像都有相应的Unicode文本，您可以应用它们。请参见答案中的链接以获取文本代码。(https://fontawesome.com/cheatsheet?from=io#social-buttons) 没有什么特别的，只需按照答案中的示例操作即可。 - Tarik
32

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

    };
44
这个插件有我见过最奇怪的“要求”；如果你定义了<!doctype html>，CSS和滚动功能会出现问题。 - Digital Ninja
2
@DigitalNinja 可能依赖于怪异模式，我猜测... - Solomon Ucko
30

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

9
需要将鼠标移出来才能折叠它。是否可以在单击而不是鼠标悬停/移动时完成？这是否适用于移动设备/非鼠标设备？ - tgkprog
4

这里使用了 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>
3

对于希望展示图标的人，且接受“黑白”方案的话，一种可能的解决方案是使用字符实体：

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

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

2
Alvaros JS free answer是我开始的好起点，我真的努力尝试了一种完全不使用JS的解决方案，仍然能够提供所有期望从带有图像的选择器中获得的功能，但可悲的是嵌套表单是失败的。我在这里发布两个解决方案; 我的主要解决方案只使用了1行JavaScript，并且完全没有JavaScript的解决方案，它不能在另一个表单内工作，但对于导航菜单可能会有用。
不幸的是，代码中存在一些重复，但是当您考虑选择器的功能时，这就有意义了。当您单击选项时，它将该文本复制到所选区域，即单击4个选项之一不会更改这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，我只在这个JSFiddle中包含了一些CSS，以减小这个已经很大的答案的大小。我使用Bootstrap 4来减少所需的数量，并允许它与其他Bootstrap控件和任何已进行的网站自定义相匹配。
图片设置为75px，但这可以在.rich-select和.rich-select-option-body img的5行中轻松更改。
1
很遗憾，我无法找到你所说的“完全不含JavaScript的解决方案”。顺便说一句：当内容安全策略（CSP）拒绝内联JS时（这应该是默认设置但实际上并非如此），onclick无法使用，以保护免受某种XSS攻击。 - Tino
1
我遇到了同样的问题。我的解决方案是使用单选按钮的foreach，将图像放在右侧。由于单选按钮只能选择一个选项，因此它像一个选择器一样工作。
对我来说效果很好。
3
<select> 不一定只用于选择单个值。 - npup
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接