Question

我试图在表单的下拉框中添加小图像作为选项，而不是文本。它适用于firefox（但是没有人再使用firefox了吗？！）所以需要一种方法来主要为chrome做这件事。我一直遇到这个ddslick的东西，但我不能从他们的网站下载它，所以想要一个替代方法。任何帮助表示赞赏！

HTML：

select#severity option[value="Minor"] {
  background: url(../assets/constants/minor.png);
}
select#severity option[value="Moderate"] {
  background: url(../assets/constants/moderate.png);
}
select#severity option[value="Major"] {
  background: url(../assets/constants/major.png);
}

<div class="variables">
  <select name="severity" id="severity" class="icon-menu">
    <option value="Severity" selected disabled>Please Select</option>
    <option value="Minor">Minor</option>
    <option value="Moderate">Moderate</option>
    <option value="Major">Major</option>
  </select>
</div>

Answer 1

你可以尝试

<select name="webmenu" id="webmenu">
    <option value="calendar" data-image="icons/icon_calendar.gif">Calendar</option>
    <option value="shopping_cart" data-image="icons/icon_cart.gif">Shopping Cart</option>
    <option value="cd" data-image="icons/icon_cd.gif">CD</option>
    <option value="email"  selected="selected" title="icons/icon_email.gif">Email</option>
    <option value="faq" data-image="icons/icon_faq.gif">FAQ</option>
    <option value="games" data-image="icons/icon_games.gif">Games</option>
  </select>

来自http://www.marghoobsuleman.com/jquery-image-dropdown感谢

的信用

Answer 2

jQuery UI有一个可用于此的Selectmenu：https://jqueryui.com/selectmenu/#custom_render

在选择下拉框

2 个答案: