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
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
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
Démonstration de fieldset et coins arrondi
Exemple sans modification de la bordure
Les coins sont arrondi sont et carrés avec Firefox
Exemple avec redéfinition de la bordure
Sous Firefox la bordure est personnalisée, plus épaisse et arrondie.
Voir aussi