Mettre en forme une balise select

Attention : les informations contenues dans ce document sont anciennes et peuvent être obsolètes.

Les feuilles de styles servent à mettre en forme n'importe quel élément d'une page web. Pourtant, une balise HTML pose problème : le champ de sélection select utilisable dans les formulaires. Voici quelques pistes pour contourner certaines limites dans le rendu des navigateurs web.

En fait, nous pouvons très bien mettre en forme un champ de sélection grâce aux CSS comme n'importe quelle autre balise html : changer la police de caractère, la couleur du texte, la couleur de fond, la largeur ou la hauteur, etc. Sauf pour ce qui est des bordures : quoique vous fassiez, quelque soit la règle que vous appliquiez, l'apparence des bordures restera toujours la même. Enfin, presque toujours.

Testons donc la mise en forme des bordures de cette balise avec 3 navigateurs, Internet Explorer 6.0, Firefox 1.0.6 et 1.5 et Opera 8.02, sous un système d'exploitation Windows.

Mises en forme de la balise select

Prenons l'exemple d'un champ de sélection tout simple :

<form action="">
  <p>
    <select>
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
  </p>
</form>

Sans mise en forme particulière, son apparence dépendra du système d'exploitation que vous utilisez. Sur le votre, il ressemblera à ceci :

Appliquer un style à la bordure

Essayons maintenant de mettre en forme les bordures de la manière la plus simple qui soit : Nous voulons une bordure solide rouge de 1 pixel d'épaisseur.

select {
  border: 1px solid #f00;
}

Voyons le résultat :

Si vous utilisez Internet Explorer ou Firefox 1.0.6, vous ne verrez aucune différence avec l'exemple précédent même si, dans le cas de Firefox, on associe à la règle la valeur !important. Par contre, Opera et Firefox 1.5 rendent la propriété css correctement.

Appliquer une couleur de fond

Modifions maintenant la couleur de fond du champ en plus de la bordure :

select {
  background: #ccc;
  border: 1px solid #f00;
}

Voyons le résultat :

Les 3 navigateurs appliquent la couleur de fond correctement, mais Firefox 1.0.6 rend cette fois-ci aussi la couleur de la bordure. Pour être plus précis, Firefox affichera la bordure avec la couleur adéquate si la couleur de fond est autre chose que du blanc (#fff). L'épaisseur et le style restent ceux par défaut. Encore une fois, seul Opera et Firefox 1.5 appliquent entièrement les règles CSS.

Résumé des résultats

Donc à ce stade de l'expérimentation, seul le navigateur web Opera et la version 1.5 de Firefox semblent appliquer les règles CSS de mise en forme des bordures d'une balise select. Firefox 1.0.6 est capable de changer la couleur de la bordure. Enfin, Internet Explorer reste sourd à toute mise en forme.

Mise en forme des bordures d'une balise select dans différents navigateurs
Styles MSIE 6.0 Firefox 1.0.6 Firefox 1.5 Opera 8.02
border-width Non Non Oui Oui
border-width + background Non Non Oui Oui
border-style Non Non Oui Oui
border-style + background Non Non Oui Oui
border-color Non Non Oui Oui
border-color + background Non Oui Oui Oui

Astuces de mise en forme

Ces tests n'ont évidemment qu'une portée limitée puisque, je le répète, l'apparence de la balise select varie en fonction du système d'exploitation sur lequel vous consultez cette page. Nous pouvons néanmoins penser à quelques petites astuces pour réussir finalement à obtenir l'effet recherché.

Mettre en forme la bordure du formulaire

Avec l'exemple ci-dessus, la solution est simple : rendons la bordure du champ de sélection transparente et dotons la balise paragraphe de la bordure rouge de 1px que nous voulons. Ajustons enfin la largeur du tout et celle des bordures :

<form>
  <p class="bord-select">
    <select>
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
  </p>
</form>
p.bord-select {
  width: 100px;
  border: 1px solid #f00;
}
select {
  width: 100%;
  background: #ccc;
  border: 2px solid transparent;
}

Nous avons cette fois-ci le même rendu dans Firefox (1.0.6 et 1.5) et dans Opera. L'effet ne fonctionne pas sous Internet Explorer puisque ce navigateur ne comprend pas la valeur « transparent » pour les couleurs de bordures (ou de fond).

L'épaisseur de la bordure du champ de sélection est fixée à 2px pour harmoniser la hauteur du champ entre Firefox 1.0.6 et Opera / Firefox 1.5 : si Firefox comprend la valeur « transparent », l'épaisseur de la bordure reste celle par défaut, c'est-à-dire 2px ; il faut donc qu'Opera applique une bordure de la même épaisseur.

Ajouter artificiellement des balises

Maintenant, pour un formulaire un peu plus complexe - un champ select (ou tout autre type de champ de formulaire) se retrouve le plus souvent accompagné d'une balise label - il faudra ruser avec le code en ajoutant par exemple une balise span qui encadre le champ de sélection. C'est cette balise qui portera la bordure rouge :

<form>
<p>
  <label for="selection">Sélection</label>
  <span class="bord-select">
    <select id="selection">
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
  </span>
</p>
</form>
span.bord-select {
  display: block;
  width: 100px;
  border: 1px solid #f00;
}
select {
  width: 100%;
  background: #ccc;
  border: 2px solid transparent;
}

Il est préférable d'utiliser des balises existantes dans le code, qui ont un sens et une utilité, plutôt que d'en ajouter « artificiellement » juste pour obtenir l'effet visuel souhaité. Vous pouvez par exemple jongler avec la balise label associée au champ de sélection. Mais s'il n'y a pas d'alternatives...

Enfin, si quelqu'un connaît d'autres techniques pour mettre en forme les bordures de la balise select, vous êtes vivement invité à laisser un message ci-dessous :-).

Ressources

Titre
10 tips to a better form
Auteurs
  • C. CAMPBELL
Editeur
Particle Tree
Date
Titre
Styling even more form controls
Auteurs
  • Roger JOHANSSON
Editeur
456 Berea Street
Date
Titre
La spécification HTML 4.01 : 17. Les formulaires
Auteurs
  • D. RAGGETT
  • Hors LE
  • I. JACOBS
Editeur
La-Grange.net
Date
Remarque
Traduction française : Jean-Jacques Solari, Karl Dubost, Alix Marchandise-Franquet, Eric Schreiner, Claude Chaunier, Leyla Greengard.