Image in SELECT element

Question

I know how to have pictures show up next to the options in a HTML dropdown form element using the CSS background-image property.

However, the images do not show up on the selected element. Is there any way to do this (preferably using only CSS)?

EDIT:

Here is an example of the working code for the list elements. However, when the drop-down is closed, you only see the text of the selected element, without the image:

<select name="form[location]">
 <option value="ad" style="background: url(img/flags/ad.gif) no-repeat; padding-left: 20px;">Andorra</option>
 <option value="ae" style="background: url(img/flags/ae.gif) no-repeat; padding-left: 20px;">United Arab Emirates</option>
 <option value="af" style="background: url(img/flags/af.gif) no-repeat; padding-left: 20px;">Afghanistan</option>
 <option value="ag" style="background: url(img/flags/ag.gif) no-repeat; padding-left: 20px;">Antigua and Barbuda</option>
 <option value="ai" style="background: url(img/flags/ai.gif) no-repeat; padding-left: 20px;">Anguilla</option>
 <option value="al" style="background: url(img/flags/al.gif) no-repeat; padding-left: 20px;">Albania</option>
 <option value="am" style="background: url(img/flags/am.gif) no-repeat; padding-left: 20px;">Armenia</option>
 <option value="an" style="background: url(img/flags/an.gif) no-repeat; padding-left: 20px;">Netherlands Antilles</option>
 <option value="ao" style="background: url(img/flags/ao.gif) no-repeat; padding-left: 20px;">Angola</option>
 <option value="ar" style="background: url(img/flags/ar.gif) no-repeat; padding-left: 20px;" selected="selected">Argentina</option>

    [...] - I think you get the idea.

</select>

Answer 1

Doing this in a cross-browser way is going to be very challenging, and I suspect, impossible.

Instead, you might want to try using a widget that looks and acts like a select box, but is made w/ HTML & Javascript.

Here's one way to do it with jQuery:

jquery.combobox

Answer 2

I agree with Nicholaides. Doing that strictly with HTML and CSS isn't going to work.

You'll want to use a progressive enhancement technique to place a regular select box on the page for users who don't use javascript or use screen readers and the like, then use javascript to replace the select box with your prettier, fancier widget.