Personnaliser les balises fieldset par CSS

La syntaxe des fieldsets et la personnalisation : comment résoudre les problèmes de compatibilité avec les différents navigateurs?

Syntaxe de fieldset

Syntaxe globale:

<fieldset>
<legend> Titre </legend>
... contenu, formulaire ...
</fieldset> 

fieldset

Attributs hérités: id, class, style, lang, title et évènements.

legend

align = top | bottom | left | right
La légende sera affichée respectivement sur le bord supérieur, inférieur, gauche, droite. Cet attribut est obsolète.
Et avec les mêmes attributs hérités.

Personnalisation

Donner une couleur de fond

Changer la couleur de fond pose un problème avec Internet Explorer 8: la couleur déborde du cadre pour englober la légende!

La solution consiste à créer une pseudo-légend avec une balise <div>.

On obtient alors le même rendu sous Internet Explorer 8 que sous Firefox.

Sous Chrome, Safari et Opera, la couleur reste confinée au cadre, mais le tracé de la bordure apparaît sous la légende. On peut l'ignorer, donner une couleur de fond à la légende ou la repositionner.

Exemple sans aucune correction et une feuille de style minimale

Le rendu est correct sous Firefox, mais la couleur de fond déborde avec Internet Explorer 7 ou 8.

Titre Hello...

Exemple sans légende

Rendu correct sous tous les navigateurs mais l'accessibilité est réduite.

Hello...

Exemple avec pseudo-légende

Rendu correct sous tous les navigateurs et notamment IE9, l'accessibilité est préservée.

Titre
Hello...

Code HTML:

<div class="legend1">Titre</div>
<fieldset>
Hello...
</fieldset>

Code de style:

fieldset
{
  background-color:#CCC;
  max-width:500px;
  padding:16px;	
}
.legend1
{
margin-bottom:0px;
margin-left:16px;
}

Coins arrondis et couleur du cadre

Par défaut, Internet Explorer présente les cadres avec des coins arrondis et une couleur de bord grisée prédéfinie. Si l'on change la couleur en redéfinissant l'attribut border, il perd ses attributs par défaut et présente une forme carrée. Et IE8 ne dispose pas d'attribut pour arrondir les coins comme Firefox.

On peut alors modifier les attributs de border pour les autres navigateurs, en excluant IE. Pour ce faire, on utilise des balises conditionnelles que seul Internet Explorer reconnait.

<!--[if !IE]><!-->
<style>
.fieldset1
{ border:2px solid green; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px;
}
</style>
<!--<![endif]-->

Ce code utilise un commentaire imbriqué dans un autre. Le commentaire extérieur contient une condition que seul IE reconnaît et donc seul IE reconnait le commentaire imbriqué.
Les autres navigateurs voient un commentaire vide au dessus et au dessous du code CSS.

Démonstration de fieldset et coins arrondi

Exemple sans modification de la bordure

Les coins sont arrondi sous Internet Explorer 8 et carrés avec Firefox

Titre Hello...

Exemple avec redéfinition de la bordure

Rien ne change sous Internet Explorer 8, sous Firefox la bordure est personnalisée, plus épaisse et arrondie.

Titre Hello...

Internet Explorer, jusqu'à la version 8 au moins, supprime les coins arrondis quand la bordure est modified, sauf si quelques astuces sont employées, voir l'article.

Voir aussi

© 2009-2012 Xul.fr