Immagine nell'elemento SELECT

Question

So come visualizzare le immagini accanto alle opzioni in un elemento del modulo a discesa HTML utilizzando la proprietà CSS background-image.

Tuttavia, le immagini non vengono visualizzate sull'elemento selezionato. C'è un modo per farlo (preferibilmente usando solo CSS)?

EDIT:

Ecco un esempio del codice di lavoro per gli elementi della lista. Tuttavia, quando la discesa è chiuso, si vede solo il testo dell'elemento selezionato, senza che l'immagine:

<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

Fare questo in maniera cross-browser sta per essere molto impegnativo, e ho il sospetto, impossibile.

Invece, si potrebbe voler provare a utilizzare un widget che sembra e si comporta come una casella di selezione, ma è stato creato con HTML & Javascript.

Ecco un modo per farlo con jQuery:

jquery.combobox

Answer 2

Sono d'accordo con Nicholaides. Farlo rigorosamente con HTML e CSS non funzionerà.

Ti consigliamo di utilizzare una tecnica di miglioramento progressivo per posizionare una casella di selezione regolare nella pagina per gli utenti che non utilizzano javascript o utilizzare screen reader e simili, quindi utilizzare javascript per sostituire la casella di selezione con il tuo più carino , widget fancier.