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>

Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Będzie to bardzo trudne na różnych przeglądarkach i podejrzewam, że jest to niemożliwe.
Zamiast tego możesz spróbować użyć widżetu, który wygląda i działa jak pole wyboru, ale jest utworzony za pomocą HTML & amp; Javascript.
Oto jeden sposób na zrobienie tego z jQuery:
jquery.combobox
http://web.archive.org/web/201 ... .aspx
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Zgadzam się z Nicolaides. Nie będziesz w stanie tego zrobić wyłącznie za pomocą HTML i CSS.
Będziesz chciał użyć techniki stopniowego ulepszania, aby umieścić normalne pole wyboru na stronie dla użytkowników, którzy nie używają javascript, czytników ekranu i tym podobnych, a następnie użyć javascript, aby zastąpić pole wyboru ładniejszym i dziwacznym widżetem.

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się