legend
elements as if they’re inside the fieldset
, while other browsers treat them as if they’re outside the fieldset
. I’m not saying that any browser’s wrong, but we have to circumvent these differences somehow, and creating a separate IE style sheet seems to be the best solution.
If you put a background-color
on a fieldset
with a legend
, as in Figure 14, you can see the problem all too clearly.

fieldset
elements with background color (See larger image in new window.)
The fieldset
on the left shows how most browsers render a legend
and fieldset
with a background color. The fieldset
on the right shows how Internet Explorer renders it — the background-color
of the fieldset
appears to extend beyond its border, stretching to fit the height of the legend
.
The way to avoid this problem is to accommodate Internet Explorer browsers with a separate style sheet that uses conditional comments:
<!--[if lte IE 7]>
<style type="text/css" media="all">
@import "css/fieldset-styling-ie.css";
</style>
<![endif]-->
legend
display difference may be corrected by then, so it’s safest just to apply it to the versions we know for the present.
Inside that style sheet we use relative positioning on the legend
to move it up to align with the top of the fieldset
:
legend {
position: relative;
left: -7px;
top: -0.75em;
}
fieldset ol {
padding-top: 0.25em;
}
In this case, the value we’ve given the legend
‘s top
— 0.75em
— just happens to be the right value to get the legend
to align with the fieldset
. It may vary depending on other styles we might apply to the legend
(such as margin
and padding
). This is quite a robust solution — we’ve used relative units, so if users change the text size in their browsers, the position of the legend
will shift accordingly and still line up.
In addition to moving the top of the legend
, we move it 7px to the left by applying a left
value of -7px
. This step counters an Internet Explorer quirk — IE always shifts legends to the right by 7px (regardless of text size), so we need to negate that shift to get the legend
and the label
elements lining up neatly.
Because we’re moving the legend up relatively, it will create more space below the legend
. To counteract this space, we reduce the padding at the top of the ordered list by an equivalent amount, changing it from the original value of 1em
to 0.25em
.
The last Internet Explorer fix is to relatively position the fieldset
itself:
fieldset {
position: relative;
}
Without this rule, Internet Explorer produces some weird visual effects around the legend
. How weird? You can see exactly how weird in Figure 5.15.

position
of the fieldset
to relative
to restore everything to normal.
Styling Legends and Fieldsets
In all browsers, legend
s will have some padding
by default. The amount of padding
varies between browsers, so to have the legend
lining up nicely with our label
s we’ll eliminate the padding
in our main style sheet:
fieldset-background-color.css (excerpt)
legend {
margin-left: 1em;
padding: 0;
color: #000;
font-weight: bold;
}
The default border
for fieldset
elements is normally an inset border — which doesn’t match some sites — so here we’re going to make it a flat, 1px border. In addition, we’ll add in a background color that will make the fieldset
elements stand out from the normal page background, marking them as special areas:
fieldset-background-color.css (excerpt)
fieldset {
float: left;
clear: both;
width: 100%;
margin: 0 0 1.5em 0;
padding: 0;
border: 1px solid #BFBAB0;
background-color: #F2EFE9;
}
Generally speaking, we don’t want any borders or background color behind the submit fieldset
, so it’s quite easy to turn those off:
fieldset-background-color.css (excerpt)
fieldset.submit {
float: none;
width: auto;
border-style: none;
padding-left: 12em;
background-color: transparent;
}
Now we’ve got fieldset
elements with a background color and a legend
that lines up neatly with all the other form elements, as in Figure 16.

fieldset
elements with background-color
set and adjustments made to legend
The cut-off of color behind the legend
can sometimes look a bit abrupt, as you can see in the magnified view of the legend
shown in Figure 17.

legend
— cut-off of background color is apparent
This cut-off will become more pronounced if we use a fieldset
background color that has more contrast with the normal page background color. If you want to counteract this effect, it’s possible to put a gradient background image into the fieldset
that smoothly changes the color from the page background color (white) to your chosen fieldset
background color:
fieldset-background-image.css (excerpt)
fieldset {
float: left;
clear: both;
width: 100%;
margin: 0 0 1.5em 0;
padding: 0;
border: 1px solid #BFBAB0;
background-color: #F2EFE9;
background-image: url(images/fieldset_gradient.jpg);
background-repeat: repeat-x;
}
That background-image
rule will also be applied to our submit fieldset
, so to keep a clean, transparent background, we’ll also have to cancel the fieldset
:
fieldset-background-image.css (excerpt)
fieldset.submit {
float: none;
width: auto;
border-style: none;
padding-left: 12em;
background-color: transparent;
background-image: none;
}
See Figure 18 — the form looks a lot smoother, no?

fieldset
elements with background color and gradient images applied
Frequently Asked Questions about Fancy Form Design with CSS
How can I change the background color of a fieldset in CSS?
Changing the background color of a fieldset in CSS is quite simple. You just need to use the ‘background-color’ property in your CSS code. Here’s an example:fieldset {
background-color: #f2f2f2;
}
In this example, ‘#f2f2f2’ is the color code for a light grey color. You can replace it with any color code of your choice.
Why is my fieldset background color not changing?
If your fieldset background color is not changing, it could be due to a few reasons. One common reason is that there might be another CSS rule that is overriding your fieldset background color rule. To fix this, you can try adding ‘!important’ to your rule like this:fieldset {
background-color: #f2f2f2 !important;
}
Another reason could be that your CSS file is not properly linked to your HTML file. Make sure that the link to your CSS file is correctly placed in the head section of your HTML file.
Can I use an image as the background for a fieldset?
Yes, you can use an image as the background for a fieldset. You can do this by using the ‘background-image’ property in your CSS code. Here’s an example:fieldset {
background-image: url('path-to-your-image.jpg');
}
Just replace ‘path-to-your-image.jpg’ with the actual path to your image.
How can I change the border color of a fieldset?
You can change the border color of a fieldset by using the ‘border-color’ property in your CSS code. Here’s an example:fieldset {
border-color: #000000;
}
In this example, ‘#000000’ is the color code for black. You can replace it with any color code of your choice.
How can I remove the border of a fieldset?
You can remove the border of a fieldset by using the ‘border’ property in your CSS code and setting it to ‘none’. Here’s an example:fieldset {
border: none;
}
This will remove the border of your fieldset.
How can I change the font size in a fieldset?
You can change the font size in a fieldset by using the ‘font-size’ property in your CSS code. Here’s an example:fieldset {
font-size: 16px;
}
In this example, ’16px’ is the font size. You can replace it with any size of your choice.
How can I change the padding in a fieldset?
You can change the padding in a fieldset by using the ‘padding’ property in your CSS code. Here’s an example:fieldset {
padding: 10px;
}
In this example, ’10px’ is the padding. You can replace it with any size of your choice.
How can I change the margin of a fieldset?
You can change the margin of a fieldset by using the ‘margin’ property in your CSS code. Here’s an example:fieldset {
margin: 20px;
}
In this example, ’20px’ is the margin. You can replace it with any size of your choice.
How can I change the width of a fieldset?
You can change the width of a fieldset by using the ‘width’ property in your CSS code. Here’s an example:fieldset {
width: 500px;
}
In this example, ‘500px’ is the width. You can replace it with any size of your choice.
How can I style the legend of a fieldset?
You can style the legend of a fieldset by using the ‘legend’ selector in your CSS code. Here’s an example:fieldset legend {
color: #000000;
font-size: 20px;
}
In this example, the color of the legend text is set to black and the font size is set to 20px. You can replace these with any values of your choice.
Cameron has been adding to the Internet for over seven years and now runs his own design and development business: www.themaninblue.com. He likes to combine the aesthetic with the technological on his Weblog, which contains equal parts of JavaScript, design and CSS.