如何在select列表中添加图像
我有一个select性别列表。
码：
<select> <option>male</option> <option>female</option> <option>others</option> </select> 我想在下拉列表中使用图像作为drop-down-icon.jpeg。
我想添加一个button来代替下拉图标。
怎么做？
在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; 图标/图像select（combobox，下拉框）
演示和下载; 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); };
另一个针对这个问题的jQuery跨浏览器解决scheme是http://designwithpc.com/Plugins/ddSlick ，正是这个用法。
我的解决scheme是使用FontAwesome，然后添加库图像作为文本！ 你只需要Unicodes，他们在这里find： FontAwesome参考文件forUnicodes
这是一个示例状态filter：
<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; 需要在样式中进行分配，就像在示例中给出的一样！
你已经有几个build议使用JavaScript / jQuery的答案。 我将添加一个替代品，只使用HTML和CSS没有任何JS。
其基本思想是使用一组单选button和标签（将激活/closures单选button），并通过CSS控制仅显示与所选单选button关联的标签。 如果你想允许select多个值，你可以通过使用checkbox而不是单选button来实现。
这是一个例子。 代码可能有点混乱（特别是与其他解决scheme相比）：
.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。 在GitHub上进行简单的Googlesearch会为您带来许多select。
2017年11月9日
ddSlick
一个免费的轻量级jQuery插件，允许您创build自定义的图片和描述下拉菜单。
我得到了同样的问题。 我的解决scheme是单选button的foreach，右边是图片。 既然你只能在广播中select一个选项，它就像一个select。
工作适合我。 希望它可以帮助别人。
我尝试了几个基于jQuery的自定义select与图像，但没有工作在响应式布局。 最后我来到了Bootstrap-Select。 经过一些修改后，我能够产生这个代码。
代码和github回购在这里
