我有一个性别选择列表。
代码:
<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
=>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小部件可用,非常接近您想要的内容。
对于国家、语言或货币,您可以使用表情符号。
适用于几乎所有支持使用表情符号的浏览器/操作系统。
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>
我的解决方案是使用Font Awesome,然后将库图标作为文本添加,可以直接在HTML中使用Unicode。
您只需要获取所需图标的Unicode值,这些值都可以在此处找到:Font Awesome完整的图标列表,包括Unicode
这是一个示例状态筛选器:
<select name='state' style='height: 45px; font-family:Arial, Font Awesome;'>
<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;
。
您可以使用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和滚动功能会出现问题。 - Digital Ninja已经有一些回答建议使用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>
这里使用了 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>
对于希望展示图标的人,且接受“黑白”方案的话,一种可能的解决方案是使用字符实体:
<select>
<option>100 €</option>
<option>89 £</option>
</select>
<select>
<option style="background-image:url(euro.png);">100</option>
<option style="background-image:url(pound.png);">89</option>
</select>
对于双色图像,您可以使用Fontello,并导入任何自定义字形。只需在Illustrator中制作您的图像,保存为SVG,并将其拖放到Fontello网站上,然后下载您的自定义字体即可导入。无需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>
.rich-select
和.rich-select-option-body img
的5行中轻松更改。onclick
无法使用,以保护免受某种XSS攻击。 - Tino<select>
不一定只用于选择单个值。 - npup
<option>
中使用该字体。这种方法被IE 8.0及以上版本支持,大小小而简单易用。 - user719662