html - 如何在下拉选项中定位背景图片

Question

我正在尝试为下拉选项设置背景图片。我已经成功了，但是宽度不起作用。正如您在 Fiddle 中看到的那样，我已经为下拉列表中的最后一个选项提供了宽度，但它在鼠标悬停时隐藏了文本。如果我没有给出宽度，下一张图片就会出现。 (例如:第二个选项)。

所以我的问题是，如何在选项的开头设置背景图片？ (如它在第三个关闭选项中的显示方式)

HTML

<select class="select_filter" id="actif_search" style="width:140px; padding:5px 22px 6px 6px;">
  <option value="1" style="padding-left:15px;" selected>ACTIVE</option>
  <option value="2" class="open">OPEN</option>
  <option value="3" class="closed">CLOSED</option>
  <option value="4" class="pending">PENDING</option>
</select>

CSS

#actif_search .open{
    background: rgba(0, 0, 0, 0) url('https://s14.postimg.org/oax1a438h/all_list_icons.png') no-repeat scroll -11px -57px;
    padding-left: 20px !important;
    margin-left: -5px;
}
#actif_search .closed{
    background: rgba(0, 0, 0, 0) url('https://s14.postimg.org/oax1a438h/all_list_icons.png') no-repeat scroll -51px -57px;
    padding-left: 20px !important;
    margin-left: -5px;
}
#actif_search .pending{
    background: rgba(0, 0, 0, 0) url('https://s14.postimg.org/oax1a438h/all_list_icons.png') no-repeat scroll -30px -57px;
    padding-left: 20px !important;
    margin-left: -5px;
    width: 5px;
}

Answer 1

<option>元素通常由操作系统呈现，并且在它们上应用样式大多数时候都会失败。没有跨浏览器解决方案，至少没有达到为每个选项使用不同背景图像的程度。

作为解决方法，您可以使用 javascript 的替换技术。 我有时使用的图书馆是 Select2 (还有 an example 用于标记图像)。

最后也看看这个问题和答案: How to style the <option> with only CSS? [duplicate]