Colocando estilo no elemento legend com CSS

CSS:

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

HTML:

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

Resultado:
legend.png

Resultado com 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 uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s