面倒くさくないフォームの作り方。

フォームのコーディングする時テキストバーとボタンの画像がなかなか揃わなくてパディングをいじったりマージンいじったりしていました。
そんなcssの微調整せずにできるフォームの作り方を紹介します。

まず全体の画像とボタンだけの画像２つを用意します。

form.jpg

form2.jpg

html

<div>
    	<form>


        </form>
        </div>

ボタンに画像をつけます。

css

#form-body{
				background:url(images/images/form.jpg) no-repeat;
				border:none;
				width:220px;
				height:24px;
				float:left;
			}

			#form-body .text{
				border:none;
				background:none repeat scroll 0 0 transparent;
				height:24px;
				width:152px;
				padding:0 5px;
			}

			#form-body .search{
				width:52px;
				float:right;
				height:24px;
				clear:both;
			}

Form-bodyのは池に全体画像を張り付けtextとsearchの場所をfloatすればできあがり＾＾

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。