Bild in SELECT-Element

Question

Ich weiß, wie Bilder neben den Optionen in einem HTML-Dropdown-Formular Element mit der CSS-Hintergrundbild-Eigenschaft angezeigt werden.

Die Bilder werden jedoch nicht auf dem ausgewählten Element angezeigt. Gibt es einen Weg dies zu tun (vorzugsweise nur mit CSS)?

EDIT:

Hier ist ein Beispiel für den Arbeitscode für die Listenelemente. Wenn jedoch die Drop-down geschlossen ist, sehen Sie nur den Text des ausgewählten Elements, ohne das Bild:

<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

tut dies in einem Cross-Browser-Weg wird sehr anspruchsvoll sein, und ich vermute, unmöglich.

Stattdessen möchten Sie vielleicht versuchen, ein Widget zu verwenden, das aussieht und sich wie ein Auswahlfeld verhält, aber mit HTML & Javascript erstellt wird.

Hier ist eine Möglichkeit, es mit jQuery zu tun:

jquery.combobox

Answer 2

ich mit Nicholaides zustimmen. Das streng mit HTML und CSS zu tun, wird nicht funktionieren.

Sie sollten eine progressive Verbesserungstechnik verwenden, um ein reguläres Auswahlfeld auf der Seite für Benutzer zu platzieren, die kein JavaScript verwenden oder Bildschirmleseprogramme und Ähnliches verwenden. Verwenden Sie dann Javascript, um das Auswahlfeld durch Ihr hübscheres zu ersetzen , schickeres Widget.