Fieldset borders and legend styling

<fieldset/> and <legend/> tags help add accessibility and organization to forms, but styling them can be frustrating. Browsers tend to display a legend as part of a fieldset, so if a fieldset has a border (as most do), that border may appear to strike through the legend text. In fact, it may do this inconsistently: I had one form with four fieldsets, and this strike-through effect appeared in only two of the four, even though they were all tagged in exactly the same manner.

You can avoid this by including a legend{} style in your CSS that adds
padding to the left and right sides of its content. In addition, you
may opt to clearly mark the legend in its own box within the confines
of the fieldset with border and background properties, like the
following:
legend {
color:#474774;
background:#EBEFFB;
border:#BBBDD6 solid 1px;
padding:1px 10px;
}

This places the legend text within a box that gets centered
horizontally along the fieldset border.

Speaking of the fieldset border: you may notice an inconsistency in
the presentation of the border line, in which it appears in some areas
and not in others. Again, of four fieldsets I had within one
particular form, three appeared correctly on all four sides, and one
appeared without a bottom border. I found that setting the border
size to too small of a value (such as something below “0.1em”) caused
this inconsistent behavior. Setting the border width value to “1px”
results in a border line that is quite thin and is usually a safe bet.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s