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

はやち

はやち

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

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

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サイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

はやち
はやち フロントエンドエンジニア / 林 佳代子

フロントエンドエンジニアのはやちです( ˘ω˘)☝ 以前までは顔隠しておりましたが思い切ることにしました…。 相変わらず顔文字乱舞ですがブログもコーディングも楽しくやっていこうと思います✌(´ʘ‿ʘ`)✌ 今までに作ったDemoたちはGithubにて公開しております!よろしければ是非( ˘ω˘)☞三☞シュッシュッ

このメンバーの記事をもっと読む