[CSS]フォームに特化したスタイルシートのフレームワーク -Formy
Post on:2008年6月25日
sponsors
テキストエリアやラジオボタン・チェックボックス、セレクトボックスなどのフォームに特化したスタイルシートのフレームワーク「Formy」を紹介します。
ファイル構成は、下記のようになっています。
- reset.css
- fieldset, form, label, legendのリセット。
- form.css
- Formyのコアファイル。
- ie.css
- IE用に調整。
スタイルシートもシンプルに設計されており、カスタマイズする際にも簡単に行えると思います。
reset.css
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<textarea name="code" class="css" cols="60" rows="5"> 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; } </textarea> |
form.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<textarea name="code" class="css" cols="60" rows="5"> /*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;} </textarea> |
ie.css
|
1 2 3 |
<textarea name="code" class="css" cols="60" rows="5"> legend{margin-bottom:1.4em;} </textarea> |
sponsors
