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

我有一份性别选择清单。

密码:

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

我想在下拉列表中使用一个图像作为下拉图标。

我想添加一个按钮的地方下拉图标。

怎么做？

797053 次浏览
小开
最佳答案

在 火狐中，你可以直接添加背景图片到选项中:

<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

超文本标示语言

<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 小部件库，例如 < strong > jQuery UI ，例如使用 翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳。

在 jQuery UI 1.11中，可以使用 选择菜单小部件，它非常接近您想要的。

小开

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

小开

可以使用 iconselect.js; Icon/image select (combobox，下拉列表)

演示和下载; http://bug7a.github.io/iconselect.js/

enter image description here

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 的自定义图像选择，但是没有一个在响应式布局中有效。最后我遇到了 Bootstrap-Select。经过一些修改，我能够产生这个代码。

这里有密码和回收信息

enter image description here

小开

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

您只需要任何图标的 Unicode 值，它们都可以在这里找到: 丰富的图标列表，包括 Unicode

image showing where to click to copy the unicode for a given icon

下面是一个状态过滤器示例:

<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>

注意，对于像示例中给出的 select，需要以样式分配 font-family:Arial, FontAwesome;。

小开

对于那些希望显示图标并接受“黑白”解决方案的人来说，一种可能性是使用字符实体:

   <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>
小开

更新: 从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>
小开

对于两种颜色的图像，可以使用 Fontello，并导入想要使用的任何自定义标志符号。只要在 Illustrator 中创建图像，保存到 SVG，并将其放到 Fontello 站点上，然后下载可以导入的自定义字体。没有 JavaScript！

小开

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

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

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>

小开

这是使用 ms-Dropdown: https://github.com/marghoobsuleman/ms-Dropdown

数据资源是 json。但是你不需要使用 json。如果你愿意，你可以使用 css。

CSS 示例: https://github.com/marghoobsuleman/ms-Dropdown/tree/master/examples

例子: http://jsfiddle.net/tcibikci/w3rdhj4s/6

超文本标示语言

<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>
小开

Alvaros JS free answer 对我来说是一个很好的开始，我真的试图得到一个真正的 JS 自由的答案，仍然提供所有的功能与图像选择，但遗憾的是嵌套形式是下降。我在这里发布了两个解决方案: 我的主要解决方案使用1行 JavaScript，以及一个完全没有 JavaScript 的解决方案，它不能在另一个表单中工作，但可能对导航菜单有用。

不幸的是，代码中有一点重复，但是当您考虑 Select 的作用时，它是有意义的。当你点击一个选项时，它会将文本复制到选定的区域，也就是说，点击4个选项中的1个不会改变4个选项，但是顶部会重复你点击的选项。要使用图像做到这一点，需要使用 JavaScript，orrr... 您复制这些条目。

在我的示例中，我们有一个游戏(产品)列表，其中有版本。每个产品也可以有扩展，它也可以有版本。对于每个 Product，如果有多个版本，我们会给用户一个每个版本的列表，以及一个图像和版本特定的文本。

<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，但这可以很容易地改变5行在 .rich-select和 .rich-select-option-body img

小开

我提出另一个选择 当我遇到这样的困难时，使用 devExpress 的 dxlookup

例子: https://js.devexpress.com/Demos/WidgetsGallery/Demo/Lookup/Templates/jQuery/Light/

小开

我曾经也遇到过同样的问题: 如何创建带有标志的语言选择器。我想出了一个没有 javascript 的: something over 解决方案。它确实涉及到在 HTML 中设置类的一些服务器端处理。

这些代码可以很容易地从 PHP 或 nodejs 或 Angular/Type 脚本中生成。在这个示例中，A 元素(< a href='./?lang=..."> )中包含3个图像。

诀窍在于您应该获取 URL GET 参数 lang并设置类 selected，这样它将是唯一可见的。

CSS 取决于这样一个事实，即基于存在的类 selected，只有一个标志可见。当鼠标悬停在容器(<div class="languageselect">.....</div>)上时，CSS 将通过覆盖类 div.flag:not(.selected)和 div.flag.selected并设置 display:block来显示所有标志。然后，<a href="..."> 将提供给用户。

当然还有很多其他的样式可以提高可用性，这只是一个起点。

请注意: CSS-line 的第一部分将把语言选择器放在固定位置的顶部。这还有助于防止标志容器跨越整个行，从而扰乱 :hover检测。

编程愉快！

这里的工作示例: Codepen

HTML:

    <div class="languageselect">
<div class="select">
<div class="flag ">
<a href="./?lang=en">
<img src="https://www.sciencekids.co.nz/images/pictures/flags120/United_Kingdom.jpg">
</a>
</div>
<div class="flag selected">
<a href="./?lang=en_us">
<img src="https://www.sciencekids.co.nz/images/pictures/flags120/United_States.jpg">
</a>
</div>
<div class="flag ">
<a href="./?lang=nl">
<img src="https://www.sciencekids.co.nz/images/pictures/flags96/Netherlands.jpg">
</a>
</div>
</div>
</div>

CSS:


.languageselect {
position: absolute;
top: 0;
left:0;
z-index: 1000;
}


.languageselect img {
max-height: 20px;
}


.languageselect div.flag:not(.selected) {
display: none;
}


.languageselect div.flag.selected {
display: block;
}


.languageselect:hover div.flag {
display:block;
}

提交答案