Why does it not appear image in option?

Question

I'm trying to create a thumbnail for my autocomplete option but I couldn't see my image on option no matter I use css.what's wrong with my code or how can it be happen using image on option ? I'm talking about for all option different image and I don't want to use style background because it work's only firefox

select {
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
}

option {
  padding: 10px;
}

<select>
<option>Option 1 <img src="https://cdn4.iconfinder.com/data/icons/web-development-5/500/coffee-break-html-code-64.png"></option>
<option>Option 2 <img src="https://cdn4.iconfinder.com/data/icons/web-development-5/500/checked-www-domain-window-64.png"></option>
</select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Possible duplicate of [How to add a images in select list](http://stackoverflow.com/questions/2965971/how-to-add-a-images-in-select-list) — Vinod Louis, Apr 17 '17 at 08:50
Possible duplicate of [putting images with options in a dropdown list](http://stackoverflow.com/questions/4941004/putting-images-with-options-in-a-dropdown-list) — 4b0, Apr 17 '17 at 08:54

score 0 · Answer 1 · answered Apr 17 '17 at 08:55

0

You can't, only in firefox is possible to add a background-image on select:

<select>
  <option style="background-image: url(images/1.jpg)">Option1 </option>
  <option style="background-image: url(images/2.jpg)">Option2 </option>
</select>

answered Apr 17 '17 at 08:55

vlk

1,414
1
13
22

score 0 · Accepted Answer · edited Apr 17 '17 at 13:05

you need to do it in this way, i tried in one of my project while taking my Bachelor of Science in Software Engineering at the university of Dodoma.

<select>
  <option style="background-image:url(option1.png);">option 1</option>

  <option style="background-image:url(option2.png);">option 2</option>

</select>

or for better results do it as follows:

HTML:

<select id="selection">
  <option>option 1</option>

  <option>option 2</option>

</select>

CSS:

select#selection option[value="option 1"] { background-image:url(option1.png); }


select#selection option[value="option 2"] { background-image:url(option2.png); }

Why does it not appear image in option?

2 Answers2