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.
Example without legend
Rendering correct on all browsers but reduced accessibility.
Example with a pseudo-legend
Rendering correct on all browsers, accessibily kept.
Title
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 by default.
Example with border redefined
The border is customized, thicker and rounded.
See also