HTML: insert image at select tag

Question

Question

i want to make my select tag like google's one 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 image below

Answer 1

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!

Answer 2

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>