How to position background images on dropdown options

Question

I'm trying to have a background image for the dropdown options. I've succeeded, but the width isn't working. As you can see in the Fiddle, I have given width to the last option in the dropdown, but it is hiding the text on mouseover. If I didn't give the width, the next images are coming. (For Ex: second option).

So my question is, how can I have the background image in the beginning of the options? (As how it is displaying in the 3rd CLOSED option)

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;
}

Doesnt work in chrome on osx. There are no images in the options. I believe the only way to do this is to not use the native select control. If you are sure this is a good idea, use something like this https://github.com/hernansartorio/jquery-nice-select, or https://silviomoreto.github.io/bootstrap-select/examples/. — Martin Gottweis, Oct 05 '16 at 14:23
and in chrome in windows. FYI this will have compatibility issues. — Panagiotis Vrs, Oct 05 '16 at 14:24
I'm trying with Firefox. So, what is the best solution to have it in all the browsers? — Linga, Oct 05 '16 at 14:25

score 1 · Answer 1 · edited May 23 '17 at 11:48

<option>elements are usually rendered by the OS and applying styles on them will fail most of the times. There are no cross browser solutions, at least not to the extent of using different background images for each option.

As a workaround you may use a replacement technique with javascript. A library I used sometimes is Select2 (there is also an example usage with images for flags).

Finally have also a look at this question and the answers: How to style the <option> with only CSS? [duplicate]

How to position background images on dropdown options

1 Answers1