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> 

Answer 1

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>

Answer 2

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