[CSS]フォームのlegendのテキストを複数行にするスタイルシート

フォームのlegendのテキストを複数行にして表示するスタイルシートを456 Berea Streetから紹介します。

Line wrapping text in legend elements
demo

デモではテキストが3行で頭でっかちになっていますが、適度なバランスとマージンがあると見た目も更によくなると思います。

複数行にするスタイルシートは、下記のようになっています。

/* For all browsers */
legend{white-space:normal;}
/* For Internet Explorer only - put in a separate file and load it with conditional comments or find a CSS hack that works with IE 8 */
legend, legend span{float:left;}
.fieldset-content{clear:both;}