Créer une liste déroulante personnalisée

Comment remédier au problème de mise en forme de longues listes déroulantes dans les formulaires HTML ? Une piste de réponse en exploitant la balise <select>.

Envoyer

Imprimer

La technique expliquée ci-après est à base de JavaScript, mais le formulaire n'est pas inaccessible pour autant. En effet, sémantiquement la liste est identique à une liste déroulante usuelle :

Code HTML:

<select name="ma_liste" class="turnintodropdown">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>

Le Javascript s'occupera de remplacer ceci par un champ de formulaire caché et une liste à puces (balise <ul> ) mise en forme grâce à une feuille de style. Le fonctionnement de la liste est reproduit en JavaScript également.

La méthode existe déjà, elle a simplement été modifiée afin qu'elle permette l'utilisation d'une longue liste d'options impliquant un ascenseur vertical (par exemple une liste complète des pays).

Le code suivant sert à ajouter une deuxième image d'arrière-plan (en l'occurrence la flèche indiquant que c'est une liste déroulante).

Code:

var arrow=document.createElement('div');
arrow.className = "arrow";
trigger.appendChild(arrow);
trigger.appendChild(document.createTextNode(sels[i].
   options[0].text));
sels[i].parentNode.insertBefore(trigger,sels[i]);

Voici le JavaScript complet (modifié) : tamingselect.js

Et un exemple d'utilisation.

La feuille de style est inclue dans ce document exemple, elle est nécessaire au fonctionnement de la liste lorsque le JavaScript est activé !

Avantages :

» Accessibilité conservée : navigation au clavier possible, les utilisateurs n'utilisant pas JavaScript ont accès à la liste simple (sans mise en forme).

» Mise en forme flexible depuis la feuille de style.

Inconvénients :

» Les utilisateurs sans JavaScript n'ont pas accès à une présentation identique.

Compatibilité :Internet Explorer 5.5 et 6.0, Internet Explorer 5.2 Mac, Firefox 1.x, Opera 7.5 et 8.0, Safari 1.3.x .

Cet article a été réalisé par Patrick Haederli sous licence creative Commons

Rédaction JDN Développeurs