CODEWITHSUNDEEP
htmlcssdrop-down-menubackground-image
Linga
Linga

Reputation: 10553

How to position background images on dropdown options

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

Upvotes: 0

Views: 853

Answers (1)

christo
christo

Reputation: 489

<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]

Upvotes: 1

Related Questions