The default display for a fieldset is a square cornered border. In certain browsers (Firefox and Safari and perhaps others) you can use CSS to make rounded corners on the border around the fieldset and around the legend.
The property used to create rounded corners is the border property. The rule is repeated three times, a redundancy meant to create the effect in as many browsers as possible. The border-radius rule is CSS3, not yet in standard adoption by all browsers. The webkit-border-radius rule is understood by all webkit browsers such as Safari. The moz-border-radius is understood by all mozilla based browsers such as Firefox.
A border can be added to the legend as well. That element can also display the rounded borders. Here’s the CSS.
Just a few CSS rules can make your fieldset look like it was styled by a pro. A fieldset is used to organize forms into sections that can be identified with labels called legends. We’re going to start this discussion looking at a fieldset with no legend. We’ll get to legends in a bit.
Here’s a fieldset with no styling as displayed in the Firefox browser.
The default Firefox fieldset is a gray border around the enclosed form fields. I’ll start with the border. This rule will change the make it solid, 2 pixels in width, and a dark blue.
fieldset {
border: 2px solid #00F;
}
This changes the appearance:
Any border width, style or color could be used. Next, I’ll round the corners. Use the border-radius property for that.
I want to change the alignment in the form. That has nothing to do with the fieldset, but it will look better if the fields align. This is the rule added.
label {
padding: 3px;
display: block;
}
The new appearance.
Many rules can be applied to the label element. Color, font, and other aspects of the label appearance can be styled.
There are still many things that can be styled about the fieldset. Width, background-color, background-image and others. Here’s the fieldset with a gradient background image added to the fieldset rule.
Web Teacher reviewed Fancy Form Design a few days ago. One of the things I learned in that fine little book is that screen readers such as JAWS announce the fieldset legend anew for each new field in the fieldset. The example in Fancy Form Design uses a fieldset with the legend “Change Password” and fields labeled “Current Password” and “New Password.” The authors pointed out that hearing the screen reader say “Change Password” before each of the form labels can be quite a lot of listening to the word “password.” As the authors also pointed out, not every screen reader even announces the legend at all.
Before I explain the solution from Fancy Form Design, here’s how the fieldset would look with an unstyled legend added.
So you’ll see what some of the possibilities are with styling a legend, I’ll show you a legend with the following rule applied.
Much more can be done to the legend with CSS. For example, the corners could be rounded, the background could be styled, the font could be changed, and so on.
For this example form, I don’t think it would be too much for a screen reader to announce, “Your contact information, full name” followed by “Your contact information, email,” and “Your contact information, telephone.” I might decide to use the legend here.
In Fancy Form Design, the authors suggest using a heading before the fieldset, rather than using a legend in the fieldset. With a heading rather than a legend, the screen reader would read the heading just once. Visually, it still makes sense. Here it is with an unstyled h3 element.
My advice is to decide whether or not a legend makes sense on a case-by-case basis.
Conclusion
You can style a fieldset like a pro when you realize that everything you know about CSS can be applied to the elements, classes and ids that exist as hooks for CSS rules within the HTML used to construct the form. Everything you know about styling fonts, colors, backgrounds, borders, padding, margin, width, display, and other CSS properties can be applied to styling fieldsets.
A small form with a styled fieldset to give you some ideas about how to punch up the appearance of a form. More . . .
A form element that will help you organize and clarify a form is the fieldset element. A form can contain more than one fieldset. For example, there might be a fieldset containing the form elements for the user’s personal information: name, email, etc. Another fieldset might collect information about a question, a product, or a service. Depending on the purpose of the form, fieldsets can help break it up into meaningful chunks and visually distinct areas.
Click the image to see the actual HTML page. (The form is nonfunctioning, submit won’t get you anywhere.)
The form in the example contains one fieldset. It’s simple, but it’s enough to illustrate the point.
Look at the various elements in the form. These elements can be styled: fieldset, legend, p, label, input. (The p elements aren’t necessary, the example could use br or div instead. And, in most forms, the submit button would not be part of a fieldset, particularly if the form had more than one fieldset, which is a very likely scenario.)
Any rule of CSS can be applied to any or all of the form elements present. You can write rules for fonts, colors, background, background-image, line spacing, padding, margin, border, or anything else you might want to present in a particular way.
These are the CSS rules I wrote. You could do this many other ways.
