a simple cell

Styling the legend Element

October 24, 2008 · 6 Comments

Form elements are notoriously difficult to style, and the legend element is no exception. The big rewrite at work uses plenty of forms, so using legend seemed like a natural choice. I soon realized that styling them to the design requirements was no easy task. While I was tempted to use heading elements instead, I decided to see if there were other options. After an hour of fiddling with the code, I settled on a solution that gave me the results I needed. It’s not perfect, but it gets the job done.

The Problem

I needed the legend element to be styled consistently with headings on the site, which meant that it needed a bottom border that spanned the width of the form. It might look something like this:

Figure 1. An example form.

Sounded easy until browser inconsistencies reared their collective ugly heads. Here’s the solution I came up with

The Solution

Let’s start with a basic, un-styled form:

<form>
    <fieldset>
        <legend>Form Legend</legend>
        <label>Label</label>
        <input type="text" />
        <label>Label</label>
        <input type="text" />
    </fieldset>
</form>
 

Figure 2. An un-styled form.

Without other styles, the resulting form will look something like Figure 2. First, let’s take away the default fieldset borders and padding, with a little treatment for Internet Explorer to get rid of their extra indentation:

fieldset {
    margin: 0;
    padding: 0;
    border: none;
}
<!--[if lte IE 7]>
<style type="text/css">
legend { margin-left: -0.5em; }
</style>
<![endif]-->
 

In order to get the form legend styled consistently, I had to add an extra span, like so:

<legend><span>Form Legend</span></legend>
 

From here on out, most of the heavy lifting is done through the span element styles:

legend {
    display: block;
    color: #fff; /* add color for IE6+7 */
    font-weight: bold;
    padding-bottom: 1em;  /* best consistent bottom spacing */
}

    legend span {
        display: block; /* needs to be here to work in Safari, FF, Camino */
        width: 300px; /* set width for Safari, FF, Camino */
        padding: 0.2em 0;
        border-bottom: 1px solid #fff;
        background: #222;
    }
 

Note that you should declare a color for the element, otherwise Internet Explorer will display the default blue. A specific width is needed for Safari, Firefox, and Camino, and only when you need the element to span the width of your form. Also note that adding padding to fieldset will affect the placement of your legend element.

See the demo.

Filed under: · Share This Post