[使える CSS テクニック] CSSを使った見栄えの良いフォーム
第 8 回目は「CSSを使った見栄えの良いフォーム」です。
フォームまわりは、各ブラウザによってかなり差異があります。
よって CSS だけで見栄えをよくしようとすると、結構手間だったります。
例をあげると
- magin・paddingが異なる
- borderの線がでない
- 背景が画像があたらない
- などなど
そんな時に便利なのが 「niceforms」 という javascriptライブラリです。
すいませんが、今回だけは javascript を使わせてください。
導入方法
まずは、niceforms をダウンロードします。
次に、必要な jsファイル および cssファイル をインクルード。
<script language="javascript" type="text/javascript" src="niceforms.js"></script>
<link rel="stylesheet"type="text/css" href="niceforms-default.css" />次に xhtml 内のフォーム要素に id名 を設定します。要素の種類によって適切な id名 を設定しないと javascript でエラーになるので注意が必要です。
サンプルでお見せしているデザインはデフォルトのものです。
デフォルトの画像一覧は下になります。
フォームのパーツが左、右、左上、右下といった感じで分割されています。
よりカスタマイズしたい場合は、imageディレクトリ内にあるこの画像を差し替えればOKです。
次回は、「CSSだけで実現するPhotoアルバム」です。
