Obraz w elemencie SELECT

Wiem, jak sprawić, by obrazy pojawiały się obok opcji na liście rozwijanej formularza HTML, używając właściwości CSS background-image.
Jednak obrazy nie są wyświetlane przy wybranej pozycji. Czy jest jakiś sposób, aby to zrobić (najlepiej używając tylko CSS)?

EDIT

:
Oto przykładowy działający kod dla elementów listy. Jednak po zamknięciu listy rozwijanej widać tylko tekst wybranego elementu, bez obrazu:

<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>