Styling Form Fieldsets, Legends and Labels

Example:

Source code of the form:

<form>
  <fieldset>
  <legend>Subscription info</legend>
    <label for="name">Username:</label>
    <input type="text" name="name" id="name" />
    <br />
    <label for="mail">E-mail:</label>
    <input type="text" name="mail" id="mail" />
    <br />
    <label for="address">Address:</label>
    <input type="text" name="address" id="address" size="40" />
  </fieldset>
</form>

Default formating of the form:

Subscription info

Adding CSS style:

fieldset {
  padding: 1em;
  font:80%/1 sans-serif;
  }
label {
  float:left;
  width:25%;
  margin-right:0.5em;
  padding-top:0.2em;
  text-align:right;
  font-weight:bold;
  }

Styled form:

Subscription info

Adding rules for fieldset and legend:

fieldset { border:1px solid green }

legend {
  padding: 0.2em 0.5em;
  border:1px solid green;
  color:green;
  font-size:90%;
  text-align:right;
  }

Styled form:

Subscription info

Notes

Older versions of Safari didn't support legend, just the fieldset border is visible. Camino (post-Chimera) has a bug causing floated labels are replaced with input fields. Buggy Opera6/Mac: legend is displayed inside the fieldset (among other text). MSIE/Mac only displays legend on the right side if text-align:right is specified. NS6 fails badly on these constructs (thanks to Manuel Razzari); however, NS7 works fine.

Petr Stanicek [aka -pixy-] - (c) 2003
http://www.pixy.cz/

TOPlist