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
Changing the background color is a problem with Internet Explorer 8: The color goes beyond the frame to include the legend!
The solution is to create a pseudo-legend with a <div> tag.
We obtain the same rendering in Internet Explorer 8 that under Firefox.
Under Chrome, Safari and Opera, the color is confined to the framework too, but the delimitation of the border appears below the legend. We can ignore it, give a background color to the legend or change its position.
Example without correction and a minimal style sheet
The rendering is correct in Firefox, but the background color is brimming with Internet Explorer 8.
Example without legend
Rendering correct on all browsers but reduced accessibility.
Example with a pseudo-legend
Rendering correct on all browsers, accessibily kept.
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
By default, Internet Explorer shows the frames with rounded corners and a predefined gray color. If you change the color by redefining the border attribute, it loses its default attributes and become of squared shape. And IE8 does not have attributes to round the corners like Firefox.
You can then change the border attributes for other browsers, excluding IE. To do this, we use conditional tags that only Internet Explorer recognizes.
<!--[if !IE]><!-->
<style>
.fieldset1
{ border:2px solid green; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px;
}
</style>
<!--<![endif]-->
This code uses a comment nested in another. The external comment contains a condition that only IE recognizes and so only IE recognizes the nested comment.
Other browsers see an empty comment above and below the CSS code.
Example with border not modified
Corners are rounded on Internet Explorer 8 and squared on Firefox
Example with border redefined
Nothing changed on Internet Explorer 8, on Firefox the border is customized, thicker and rounded.
Internet Explorer, until version 8 at least, removes rounded corners when the border is modified but if some hack is applied, see the article.