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?

    Reply

    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.

      Reply

  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.

    Reply

Leave a Reply