Colocando estilo no elemento fieldset com CSS

CSS:

#el01 {padding:0} /* Remove padding */
#el02 { /* Text and background colour, blue on light gray */
color:#00f;
background-color:#ddd
}
#el03 {background:url(/i/icon-info.gif) no-repeat 100% 50%} /* Background image */
#el04 {border-width:6px} /* Border width */
#el05 {border:2px dotted #00f} /* Border width, style and colour */
#el06 {border:none} /* No border */
#el07 {font-family:”Courier New”,Courier} /* Different font */
#el08 {font-size:2em} /* Bigger text */
#el09 {font-size:0.5em} /* Smaller text */
#el10 {font-weight:bold} /* Bold text */
#el11 {padding:2em} /* Increase padding */
#el12 {text-align:right} /* Change text alignment */
fieldset p {margin:0} /* Remove margins from p elements inside fieldsets */

HTML:

<fieldset id=”el##”>
<legend>#el##</legend>
<p>Some text.</p>
</fieldset>

Resultado:
fieldset.png

Resultados em outros SO:

  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

Fonte: http://www.456bereastreet.com

Deixe um comentário