Question

我试图为下拉选项设置背景图片。我成功了，但宽度不起作用。正如您在Fiddle中看到的那样，我已经为下拉列表中的最后一个选项指定了宽度，但它将鼠标悬停在文本上。如果我没有给出宽度，那么接下来的图像就会出现。（例如：第二个选项）。

所以我的问题是，我怎样才能在选项的开头有背景图片？（如第3个CLOSED选项中显示的那样）

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]

如何在下拉选项中定位背景图像

1 个答案: