How can I add icon images to select options?

Question

Question

I want to make my select tag like Google's. This is mine:

This is my code

<script >
        function format(state) {
            if (!state.id) return state.text;
            return "<img class='flag' src='Photos/" + state.id.toLowerCase() + ".jpg'/>" + $(originalOption).data('foo') + "' />" + state.text;
        }
</script>
<select id="mobilephone">
    <option value="indo" ><img src="Photos/indo.jpg" id="captchaimg">Indonesia</option>
    <option style="background-image:url(Photos/rico.png);">Rico</option>
    <option style="background-image:url(Photos/SA.png);">South Africa</option>
    <option style="background-image:url(Photos/UK.jpg);">United Kingdom</option>
</select>

I want to make it like this:

Take a look at [JavaScript image combobox](http://www.marghoobsuleman.com/jquery-image-dropdown) CSS won't work because different browsers treat `select` dropdowns differently. — APAD1, May 24 '16 at 18:06
It works fine, I have used that library many times. Here's an exmaple page that has exactly what you're trying to do: http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/index.html — APAD1, May 24 '16 at 18:30
@APAD1 cannot understand dude. can't you give me more easier example ? from your maybe ? just important part plz :D — Kira Katou, May 24 '16 at 18:59
what happens if you add `no-repeat left` at the end of your `background-image: url(...)` ? — blurfus, May 24 '16 at 19:04
@ochi i try to use background only and its work but in the box didnt show the flag :( — Kira Katou, May 24 '16 at 19:17

score 0 · Answer 1 · edited Jul 14 '18 at 19:14

If you are using jQueryUI, then this may work : http://jqueryui.com/selectmenu/#custom_render

This seems quite neat : http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx

You cannot do this directly using the <select> tag since that is a form element, but you can implement this using <div> or other methods.

A work-around to this could be :

<select>
    <option style="background-image:url(something.png);">male</option>
    <option style="background-image:url(something.png);">female</option>
    <option style="background-image:url(something.png);">others</option>
</select>

But this would only work in Firefox :(

Personally I would recommend using some JS widget library like the one above.

Hope this helps!

i need to use select tag dude that's my assignment :( if use that way i can do that — Kira Katou, May 24 '16 at 19:00

score 0 · Answer 2 · answered Jul 27 '21 at 10:22

0

You can simply use the emoji for each flag.

<select id="mobilephone"> 
    <option selected disabled>Select country</option>
    <option> Indonesia</option>
    <option> Puerto Rico</option>
    <option> South Africa</option>
    <option> United Kingdom</option>
</select>

answered Jul 27 '21 at 10:22

Timothy Alexis Vass

2,526
2
11
30

2

Not the best idea, emojis aren't supported on all platforms and with all fonts (even right know in my browser they display as country codes) – mi1000 Apr 23 '23 at 21:10

How can I add icon images to select options?

Question

This is my code

2 Answers2

Linked