Customizing the fieldset tag with CSS

The syntax of fieldset and its customization: how to solve the problems of compatibility with different browsers?

fieldset syntax

Global syntax: 

<fieldset>
    <legend> Title </legend>
        ... content, form ... 
</fieldset>

fieldset

Inherited attributes: id, class, style, lang, title, and events.

legend

align = top | bottom | left | right
The caption will be posted on the board respectively at top, bottom, left, right. This attribute is deprecated.
And also the same inherited attributes.

Customization

Giving a background color

Example without correction and a minimal style sheet

The rendering is correct in Firefox.

Title Hello...

Example without legend

Rendering correct on all browsers but reduced accessibility.

Hello...

Example with a pseudo-legend

Rendering correct on all browsers, accessibily kept.

Title
Hello...

HTML code :

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

CSS style code :

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

Fieldset with rounded corners and border color

Example with border not modified

Corners are squared on Firefox

Title Hello...

Example with border redefined

On Firefox the border is customized, thicker and rounded.

Title Hello...

See also

© 2009-2022 Xul.fr