Styling legend elements with CSS

This demo page is related to the article Styling form controls with CSS, revisited. For more info on the purpose of this page, please read the article.

Each fieldset element consists of this HTML:

  1. <fieldset id="el##">
  2. <legend>#el##</legend>
  3. <p>Some text.</p>
  4. </fieldset>

The following CSS rules are used to style the legend elements:

  1. fieldset {position:relative} /* For legend positioning */
  2. #el01 legend {padding:0} /* Remove padding */
  3. #el02 legend { /* Text and background colour, blue on light gray */
  4. color:#00f;
  5. background-color:#ddd;
  6. }
  7. #el03 legend {background:url(/i/icon-info.gif) no-repeat 100% 50%} /* Background image */
  8. #el04 legend {margin:0} /* Remove margin */
  9. #el05 legend {border:2px dotted #00f} /* Border width, style and colour */
  10. #el06 legend { /* Position at top left corner of fieldset */
  11. position:absolute;
  12. top:0;
  13. left:0;
  14. }
  15. #el07 legend {font-family:"Courier New",Courier} /* Different font */
  16. #el08 legend {font-size:2em} /* Bigger text */
  17. #el09 legend {font-size:0.5em} /* Smaller text */
  18. #el10 legend {font-weight:bold} /* Bold text */
  19. #el11 legend {padding:2em} /* Increase padding */
  20. #el12 legend {text-align:right} /* Change text alignment */

In your current browser, with your current settings, the legend elements look like this:

#el01

Some text.

#el02

Some text.

#el03

Some text.

#el04

Some text.

#el05

Some text.

#el06

Some text.

#el07

Some text.

#el08

Some text.

#el09

Some text.

#el10

Some text.

#el11

Some text.

#el12

Some text.

And here are screenshots from several browsers on different operating systems:

  1. Camino 1, Mac OS X 10.4.8
  2. Firefox 2.0.0.1, Mac OS X 10.4.8
  3. Firefox 2.0.0.1, Ubuntu 6.10
  4. Firefox 2.0.0.1, Windows XP
  5. iCab 3.0.3, Mac OS X 10.4.8
  6. Internet Explorer 6, Windows XP
  7. Internet Explorer 7, Windows XP
  8. Konqueror 3.5.5, Kubuntu
  9. OmniWeb 5.5.1, Mac OS X 10.4.8
  10. Opera 9.10, Mac OS X 10.4.8
  11. Opera 9.10, Ubuntu 6.10
  12. Opera 9.10, Windows XP
  13. Safari 2.0.4, Mac OS X 10.4.8
  14. WebKit 420+, Mac OS X 10.4.8
Camino 1, Mac OS X 10.4.8

Back to screenshot list

Firefox 2, Mac OS X 10.4.8

Back to screenshot list

Firefox 2, Ubuntu 6.10

Back to screenshot list

Firefox 2, Windows XP

Back to screenshot list

iCab 3, Mac OS X 10.4.8

Back to screenshot list

Internet Explorer 6, Windows XP

Back to screenshot list

Internet Explorer 7, Windows XP

Back to screenshot list

Konqueror 3.5.5, Kubuntu

Back to screenshot list

OmniWeb 5.5.1, Mac OS X 10.4.8

Back to screenshot list

Opera 9.10, Mac OS X 10.4.8

Back to screenshot list

Opera 9.10, Ubuntu 6.10

Back to screenshot list

Opera 9.10, Windows XP

Back to screenshot list

Safari 2, Mac OS X 10.4.8

Back to screenshot list

WebKit 420+, Mac OS X 10.4.8

Back to screenshot list

Lab Index | 456 Berea Street Home | Copyright © 2003-2014 Roger Johansson