Add html img tag in option text

Question

Is there any way to put img tag in the text of a html option? For example i need something like this :

<select>
  <option value="1"> Text1<img src="foto.png"> </option>
  <option value="2"> Text2<img src="foto.png"> </option>
</select>

In title you want to add ``, in description you want to add `` and in example again you want to add ``… o__0 btw, do you just want to show an image for visual effect..? — T J, Jun 13 '14 at 12:27
It isn't really possible with pure html... With javascript it is, like in this topic: [Dropdown select with images](http://stackoverflow.com/questions/9508029/dropdown-select-with-images) — hdomos, Jun 13 '14 at 12:29

Mooseman · Accepted Answer · 2018-12-23T11:18:14.313

2

An option cannot have any children elements, including img.

The HTML5 <option> spec says the following (Emphasis mine):

If the first argument is not the empty string, the new object must have as its only child a Text node whose data is the value of that argument. Otherwise, it must have no children.

edited Dec 23 '18 at 11:18

answered Jun 13 '14 at 12:26

Mooseman

18,763
14
70
93

this link is dead and using a child img tag doesn't work for me. – khaverim Dec 21 '18 at 19:00
@khaverim The spec previously linked says that a child `img` does not work. I updated the link and added a quote. – Mooseman Dec 21 '18 at 20:18
the option tag is a member of the Night's Watch – Code Baller Jan 30 '19 at 20:50

score 0 · Answer 2 · answered Jun 13 '14 at 12:33

Only FireFox browser support Background images on Select options:

test.html

<select id="test_select">
  <option>test1</option>
  <option>test2</option>
</select>

style.css

select#test_select option[value="test1"]   { background-image:url(test1.png);   }
select#test_select option[value="test2"] { background-image:url(test2.png); }

Or you can use Jquery Selector to show Images.. http://api.jqueryui.com/selectable/

score 0 · Answer 3 · answered Sep 08 '16 at 05:34

We can add a image inside option tag by jQuery and only in firefox!

Look here: http://jsfiddle.net/L8s6spp4/1/

Html:

This code Only works in Firefox.
<br/>
<select id="myselect">
  <option value="_none"> - Select One - </option>
  <option value="asterisk">asterisk</option>
  <option value="plus">plus</option>
  <option value="euro">euro</option>
</select>

Jquery:

(function($) {
  $(document).ready(function() {
    $('#myselect option').each(function() {
      $(this).html('<img src="http://jsfiddle.net/img/logo.png">' + $(this).html());
    })
  });
})(jQuery);

score 0 · Answer 4 · answered Feb 10 '17 at 16:03

0

You can use fontAwesome, to show some 'img'. For example, using &#xF046 can show a checkbox image. It's better than nothing.

answered Feb 10 '17 at 16:03

Zhou Hongbo

1,297
13
25

Add html img tag in option text

4 Answers4