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 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;
}
See Also: Styling a fieldset with CSS.
Stumble it!
5 Comments
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?
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.
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.
Thanks for pointing that out, WJL. Good information.
nice fieldsets styles, thanks for sharing!
What can you contribute?