Three examples of fieldsets styled with CSS

These rules applied to all the examples:

label {
display: block;
width: 10em;
float: left;
}
fieldset {
width: 25em;
}

Example One

This example uses a background color. The CSS for this fieldset is:

fieldset {
font: 1em Verdana, Geneva, sans-serif;
text-transform: none;
color: #00F;
background: #CCF;
border: thin solid #333;
}
#legend {
font-size: 1.4em;
text-transform: uppercase;
color: #000;
}

example one

Example Two

This example uses a background image. The CSS for example two is:

fieldset {
font: 1em Georgia, "Times New Roman", Times, serif;
background: url(img/wave-in-blue.jpg) no-repeat center top;
border: medium dotted #3B6281;
color: #C30;
}
legend {
font-size: 1.3em;
border: medium dotted #60A4C1;
}
label {
font-weight: bold;
}


Example Three

Example three uses heavy black and white contrast. The CSS is:

fieldset {
border: thick solid #000;
}
legend {
color: #FFF;
background: #000;
font-size: 1.5em;
padding: 5px;

}

example three

See Also: Styling a fieldset with CSS.

5 thoughts on “Three examples of fieldsets styled with CSS”

  1. When I text-align:right; the fieldset tag, FF and IE leave the legend left (and the fieldset text right). BUT, Safari justifies the legend AND the fieldset text right. Which one is correct?

    1. I don’t know that either is “right.” You might try setting the legend as a block level element in the CSS to see if that gives you better control over placement. Unfortunately, browsers and operating systems have different ideas about form element appearance.

  2. Caution: When placing a background-color on a fieldset, this color will “bleed” outside the border in IE, and look horrible. Yet another reason to always test your site in multiple browsers.

Leave a Reply