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.
Exemple sans légende
Rendu correct sous tous les navigateurs mais l'accessibilité est réduite.
Exemple avec pseudo-légende
Rendu correct sous tous les navigateurs et notamment IE9, l'accessibilité est préservée.
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
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.
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.