How to Style a Fieldset and Legend With CSS

A Styled Fieldset and Legend

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 and other details. 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. This article will instruct you how to style a fieldset and legend.

Difficulty:

Moderately Easy

Instructions

Things You'll Need

• Basic HTML knowledge
• Basic CSS knowledge
• HTML editor

1. The Fieldset HTML

   Create the fieldset shown in the introduction with the accompanying HTML.

2. 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.

3. 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.

4. These are the CSS rules I wrote to style the fieldset and legend. You could do this many other ways. My way is not the only way.

   fieldset {
   border: 1px solid #CCA383;
   width: 50%;
   background: #FFE8EF;
   padding: 3px;
   }
   fieldset legend {
   background: #CCA383;
   padding: 6px;
   font-weight: bold;
   }

5. Some simple touches with CSS involving color, padding and border make the legend stand out and visually emphasize the form on the page.

Resources

• CSS Tutorial