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.

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

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

Title Hello...

Example with border redefined

Nothing changed on Internet Explorer 8, on Firefox the border is customized, thicker and rounded.

Title Hello...

Internet Explorer, until version 8 at least, removes rounded corners when the border is modified but if some hack is applied, see the article.

See also

© 2009-2012 Xul.fr