web-dev-qa-db-fra.com

Image dans l'élément SELECT

Je sais comment faire apparaître des images à côté des options dans un élément de formulaire déroulant HTML à l'aide de la propriété CSS background-image.

Cependant, les images n'apparaissent pas sur l'élément sélectionné. Existe-t-il un moyen de le faire (de préférence en utilisant uniquement CSS)?

MODIFIER:

Voici un exemple du code de travail pour les éléments de la liste. Cependant, lorsque la liste déroulante est fermée, vous ne voyez que le texte de l'élément sélectionné, sans l'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>
htmlcsshtml-select
20
Franz

Faire cela de manière multi-navigateurs va être très difficile, et je suppose, impossible.

Au lieu de cela, vous voudrez peut-être essayer d'utiliser un widget qui ressemble et agit comme une boîte de sélection, mais qui est fait avec HTML et Javascript.

Voici une façon de le faire avec jQuery:

jquery.combobox

12
nicholaides

Je suis d'accord avec Nicholaides. Faire cela strictement avec HTML et CSS ne fonctionnera pas.

Vous voudrez utiliser une technique d'amélioration progressive pour placer une boîte de sélection régulière sur la page pour les utilisateurs qui n'utilisent pas de javascript ou qui n'utilisent pas de lecteurs d'écran, puis utilisez javascript pour remplacer la boîte de sélection par votre widget plus joli et plus sophistiqué.

6
Gabriel Hurley