[CSS]フォームに特化したスタイルシートのフレームワーク -Formy

テキストエリアやラジオボタン・チェックボックス、セレクトボックスなどのフォームに特化したスタイルシートのフレームワーク「Formy」を紹介します。

Formy - CSS Form Framework

ファイル構成は、下記のようになっています。

reset.css

fieldset, form, label, legendのリセット。

form.css

Formyのコアファイル。

ie.css

IE用に調整。

スタイルシートもシンプルに設計されており、カスタマイズする際にも簡単に行えると思います。

reset.css

fieldset, form, label, legend{
	margin:0;
	padding:0;
	border:0;
	font-weight:inherit;
	font-style:inherit;
	font-size:100%;
	font-family:inherit;
	vertical-align:baseline;
}

form.css

/*Formy - CSS Framework 0.8 */

/*fieldset legend*/
fieldset{padding:1.4em;margin:0 0 1.5em 0;border:1px solid #ccc;}
legend{padding:0 .4em;font-size:1.2em;background-color:#e3dfdf;color:#333;}

/*label*/
label{float:left;clear:left;text-align:left;width:9em;margin-right:1em;display:block;color:#333;}

/* Textarea input select */
textarea, input, select{margin:0.5em 0.5em 0 0;padding:0.2em;}
textarea{border:1px solid #666;}
textarea:focus, input[type="text"]:focus{border:2px solid #666;}
select{background-color:#fff;color:#000;padding:0;}
input[type="text"]{border:1px solid #666;}
input[type="submit"]{background-color:#ccc;color:#333;margin:0.5em 0.5em 0 0;padding:0.4em;}
input[type="checkbox"]{color:#000;}
input[type="radio"]{color:#FF0000;background-color:#fff;color:#000;padding:0.5em;}

/*option optgroup*/
option{color:#000;background-color:#FFF}
optgroup{color:#000;background-color:#CCC;}

/*button*/
button{background-color:#ccc; color:#333; margin:0.5em 0.5em 0 0;padding:0.4em;}

ie.css

legend{margin-bottom:1.4em;}

Post on:2008年6月25日