CSS3とjQueryでフォームを美しく装飾する方法

2010年10月27日
CSS, jQuery

どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです！そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。

フォームの仕様

CSS3+jQueryでフォームを装飾

今回チャレンジするフォームの主な仕様です！

グラデーション・ボックスシャドウを使って立体感を表現
角丸で丸みをつける（モダンブラウザ）
対応ブラウザ: IE7△, IE8△, IE9, Firefox, Chrome, Safari

サンプル

フォーム制作の流れ

CSS3ってなんだ？という人もひとつひとつ記述していけば意外と簡単に作れるはずです！リンクをクリックで各項目にジャンプします。

テキストボックス、セレクトメニュー、テキストエリアの装飾
送信ボタンの装飾
チェックボックス、ラジオボタンの装飾
完成！

1. テキストボックス、セレクトメニュー、テキストエリアの装飾

テキストボックス、セレクトメニュー、テキストエリアには同じ効果を実装させます。

1-1. まずは部品設置とベースの装飾

フォームの部品を設置

<form>内にテキストボックス、セレクトメニュー、テキストエリアを設置し、背景色などの基本的な装飾を実装します。

HTML

<form>
    <div>
        <label>名前</label><br />
        <input type="text" class="text" size="35" value="" />
    </div>
	        
    <div>
        <label>メールアドレス</label><br />
        <input type="text" class="text" size="35" value="" />
    </div>
			
    <div>
        <label>セレクトメニュー</label><br />
        <select class="dropdown">
            <option>選択してください</option>
            <option>嬉しい</option>
            <option>楽しい</option>
            <option>大好き</option>
        </select>
    </div>

    <div>
        <label>コメント</label><br />
	<textarea cols="35" rows="7" name="comments" id="comments"></textarea>
    </div>
</form>

CSS

form{background: #eee;width:400px;}
	form div{padding: 10px 20px;}

1-2. グラデーション

CSS3でグラデーション

それぞれにCSS3でグラデーションをつけます。各ブラウザーによって書き方が違うのでややこしいのですが、下記コードをコピペしてご使用ください :)

CSS

.text, textarea, .dropdown{
	border:1px solid #777;
	padding: 5px;
	color: #999;
	background: #fff;
	
/* Webkit */
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#eee),
		to(#fff)
		);
	
/* Firefox */
	background: -moz-linear-gradient(
		top,
		#eee,
		#fff
		);
	
/* IE */
	filter:progid:DXImageTransform.Microsoft.gradient
        (startColorstr=#ffeeeeee,endColorstr=#ffffffff);
	zoom: 1;
}

1-3. 角丸

CSS3で角丸

コーナー部分に丸みをもたせて柔らかい印象に！※Chrome, Safari, Firefox対応

CSS

.text, textarea, .dropdown{
	border:1px solid #777;
	padding: 5px;
	color: #999;
	background: #fff;
	border-radius: 5px;
	
	/* Webkit */
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#eee),
		to(#fff)
		);
	-webkit-border-radius: 5px;
	
	/* Firefox */
	background: -moz-linear-gradient(
		top,
		#eee,
		#fff
		);
	-moz-border-radius: 5px;
	
	/* IE */
	filter:progid:DXImageTransform.Microsoft.gradient
        (startColorstr=#ffeeeeee,endColorstr=#ffffffff);
	zoom: 1;
}

1-4. ボックスシャドウ

CSS3でボックスシャドウ

背景色をつけている場合、ボックスシャドウをプラスすることでより立体的に表現できます。

CSS

.text, textarea, .dropdown{
	border:1px solid #777;
	padding: 5px;
	color: #999;
	background: #fff;
	border-radius: 5px;
	
	/* Webkit */
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#eee),
		to(#fff)
		);
	
	-webkit-border-radius: 5px;
	-webkit-box-shadow: 1px 1px 1px #fff;
	
	/* Firefox */
	background: -moz-linear-gradient(
		top,
		#eee,
		#fff
		);
	
	-moz-border-radius: 5px;
	-moz-box-shadow: 1px 1px 1px #fff;
	
	/* IE */
	filter:progid:DXImageTransform.Microsoft.gradient
        (startColorstr=#ffeeeeee,endColorstr=#ffffffff);
	zoom: 1;
}

» サンプルを見る

フォーム制作の流れ目次へ。

2. 送信ボタンの装飾

送信ボタンの装飾

送信ボタンも 1. と同じくグラデーション、角丸、ボックスシャドウの効果を付け加えます。色はお好みで変更してください！

HTML

<div>
    <input type="submit" class="submit" value="送信する" />
</div>

CSS

.submit{
	border:1px solid #777;
	padding: 4px 10px;
	color: #fff;
	cursor: pointer;
	background: #428ec9;
	border-radius: 5px;
	
/* Webkit */
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#99c9e5),
		to(#428ec9)
		);
	-webkit-border-radius: 5px;
	-webkit-box-shadow: 1px 1px 1px #fff;
		
/* Firefox */
	background: -moz-linear-gradient(
		top,
		#99c9e5,
		#428ec9
		);
	-moz-border-radius: 5px;
	-moz-box-shadow: 1px 1px 1px #fff;
	
/* IE */
	filter:progid:DXImageTransform.Microsoft.gradient
        (startColorstr=#ff99c9e5,endColorstr=#ff428ec9);
	zoom: 1;
}

» サンプルを見る

フォーム制作の流れ目次へ。

3. チェックボックス、ラジオボタンの装飾

CSSでは装飾できないチェックボックスとラジオボタンには画像とjQueryを使ってデザインします。

3-1. 画像をつくる

CSSスプライト画像

チェック前、チェック後ともにひとつの画像を使用します。チェック前は上部分のみ表示し、チェック後に下部分を表示する仕組みです。（CSSスプライトについては→CSSスプライトで画像を円滑に表示させる）

3-2. チェックボックス、ラジオボタンを画像に置換

チェックボックス、ラジオボタンを画像に置換

チェックボックスとラジオボタンに z-index: -1; position: absolute; を加えて画像に置換します。図のようにチェックボックスとラジオボタンの上に画像を重ねているわけです。

HTML

<!-- チェックボックス -->
<div>
	<input id="CheckBox1" type="checkbox" class="checkbox"/>
	<label id="Label1" for="CheckBox1" class="CheckBoxLabelClass">Checkbox 1</label>

	<input id="CheckBox2" type="checkbox" class="checkbox"/>
	<label id="Label2" for="CheckBox2" class="CheckBoxLabelClass">Checkbox 2</label>	
</div>

<!-- ラジオボタン -->			
<div>
	<input id="Radio1" type="radio" class="radio" name="group1" >
	<label id="Label1" for="Radio1" class="radiolabel">Radio 1</label>
	<input id="Radio2" type="radio" class="radio" name="group1"/>
			
	<label id="Label2" for="Radio2" class="radiolabel">Radio 2</label>	
	<input id="Radio3" type="radio" class="radio" name="group1"/>
	<label id="Label3" for="Radio3" class="radiolabel">Radio 3</label>
</div>

CSS

.checkbox,.radio{
	z-index: -1;
	position: absolute;
	}
	.CheckBoxLabelClass{
		background: url("http://www.webcreatorbox.com/sample/images/checkbox.png") no-repeat top left;
		margin-right:20px;
		padding-left:22px;
		}
	
	.radiolabel{
		background: url("http://www.webcreatorbox.com/sample/images/radio.png") no-repeat top left;
		margin-right:20px;
		padding-left:22px;
		}

3-3. jQueryでクラスを与える

jQueryでクラスを与える

チェックされた時にjQueryを使ってクラスを与えます。チェックされた時の画像を表示させるためです。jQueryファイルをダウンロードして <head> 内に記述しましょう。

header内でjQueryファイルを読み込む

<script type="text/javascript" src="js/jquery.js"></script>

jQueryコード

<script type="text/javascript">
$(document).ready(function(){
	$(".checkbox").change(function(){
		if($(this).is(":checked")){
			$(this).next("label").addClass("LabelSelected");
		}else{
			$(this).next("label").removeClass("LabelSelected");
		}
	});
	$(".radio").change(function(){
		if($(this).is(":checked")){
			$(".RadioSelected:not(:checked)").removeClass("RadioSelected");
			$(this).next("label").addClass("RadioSelected");
		}
	});	
});
</script>

CSS

.LabelSelected,.RadioSelected{
	background-position: bottom left;
	}

» サンプルを見る

フォーム制作の流れ目次へ。

4. 完成！

フォーム完成

素敵に変身をとげました！コードをまとめるとこんな感じです↓

HTML（header内）

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".checkbox").change(function(){
		if($(this).is(":checked")){
			$(this).next("label").addClass("LabelSelected");
		}else{
			$(this).next("label").removeClass("LabelSelected");
		}
	});
	$(".radio").change(function(){
		if($(this).is(":checked")){
			$(".RadioSelected:not(:checked)").removeClass("RadioSelected");
			$(this).next("label").addClass("RadioSelected");
		}
	});	
});
</script>

HTML（body内）

<form>
    <div>
        <label>名前</label><br />
        <input type="text" class="text" size="35" value="" />
    </div>
	        
    <div>
        <label>メールアドレス</label><br />
        <input type="text" class="text" size="35" value="" />
    </div>
			
    <div>
        <label>セレクトメニュー</label><br />
        <select class="dropdown">
            <option>選択してください</option>
            <option>嬉しい</option>
            <option>楽しい</option>
            <option>大好き</option>
        </select>
    </div>
	        
    <div>
        <input id="CheckBox1" type="checkbox" class="checkbox"/>
        <label id="Label1" for="CheckBox1" class="CheckBoxLabelClass">Checkbox 1</label>

        <input id="CheckBox2" type="checkbox" class="checkbox"/>
        <label id="Label2" for="CheckBox2" class="CheckBoxLabelClass">Checkbox 2</label>	
    </div>
			
    <div>
        <input id="Radio1" type="radio" class="radio" name="group1" >
        <label id="Label1" for="Radio1" class="radiolabel">Radio 1</label>

        <input id="Radio2" type="radio" class="radio" name="group1"/>
        <label id="Label2" for="Radio2" class="radiolabel">Radio 2</label>	

        <input id="Radio3" type="radio" class="radio" name="group1"/>
        <label id="Label3" for="Radio3" class="radiolabel">Radio 3</label>
    </div>
    
    <div>
        <label>コメント</label><br />
        <textarea cols="35" rows="7" name="comments" id="comments"></textarea>
    </div>
	        
    <div>
        <input type="submit" class="submit" value="送信する" />
    </div>
</form>

CSS

form{background: #ddd;width:400px;}
	form div{padding: 10px 20px;}

.text, textarea, .dropdown{
	border:1px solid #777;
	padding: 5px;
	color: #999;
	background: #fff;
	border-radius: 5px;
	
	/* Webkit */
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#eee),
		to(#fff)
		);
	
	-webkit-border-radius: 5px;
	-webkit-box-shadow: 1px 1px 1px #fff;
	
	/* Firefox */
	background: -moz-linear-gradient(
		top,
		#eee,
		#fff
		);
	
	-moz-border-radius: 5px;
	-moz-box-shadow: 1px 1px 1px #fff;
	
	/* IE */
	filter:progid:DXImageTransform.Microsoft.gradient
        (startColorstr=#ffeeeeee,endColorstr=#ffffffff);
	zoom: 1;
	}
 	
.submit{
	border:1px solid #777;
	padding: 4px 10px;
	color: #fff;
	cursor: pointer;
	background: #428ec9;
	border-radius: 5px;
	
	/* Webkit */
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#99c9e5),
		to(#428ec9)
		);
	-webkit-border-radius: 5px;
	-webkit-box-shadow: 1px 1px 1px #fff;
		
	/* Firefox */
	background: -moz-linear-gradient(
		top,
		#99c9e5,
		#428ec9
		);
	-moz-border-radius: 5px;
	-moz-box-shadow: 1px 1px 1px #fff;
	
	/* IE */
	filter:progid:DXImageTransform.Microsoft.gradient
        (startColorstr=#ff99c9e5,endColorstr=#ff428ec9);
	zoom: 1;
	}
	
	
	
.checkbox,.radio{
	z-index: -1;
	position: absolute;
	}
	.CheckBoxLabelClass{
		background: url("http://www.webcreatorbox.com/sample/images/checkbox.png") no-repeat top left;
		margin-right:20px;
		padding-left:22px;
		}
	
	.radiolabel{
		background: url("http://www.webcreatorbox.com/sample/images/radio.png") no-repeat top left;
		margin-right:20px;
		padding-left:22px;
		}
	.LabelSelected,.RadioSelected{
		background-position: bottom left;
		}

「えー、もっと楽な方法あるよ？」というのがあればぜひぜひ教えてください！

» サンプルを見る

フォーム制作の流れ目次へ。

加藤

おもわず漏らしそうになりました。いつも良質な記事をありがとうございます。
Pingback: Topics 20101028 | Real Topics
Pingback: another side of view » Blog Archive » CSS3とjQueryでフォームを美しく装飾する方法
Pingback: Topics 20101031 | Real Topics
西岡

いつも良質の記事ありがとうございます。

チェックボックスとラジオボタンの
画像の下が少し切れてしまう現象があったので

.CheckBoxLabelClass
.radiolabel

の2つのClassに
display:block;height:17px;
を付け加えると上手くいきました。

でも、この方法は横並びはfloatとか使う必要があるんですけどね。。。
wataru kofu

thanks!
Pingback: 便利なCSS関連の情報 :Brilgue
http://sishuu.com 金川誠司

初めましてm(_ _)m
すごくわかりやすい説明で早速採用させていただいてます＾＾

チェックボックスでデフォルトにどこかにチェックを入れておきたい場合、
checked=checked だけではだめですね・・・

チェック忘れを防ぐためぜひ初期的にチェックを入れておきたいのですが・・・

参考：
http://sishuu.com/est.form
じゅんや

初めまして。めちゃくちゃ見やすくて分かりやすいサイトで隅から隅まで読まして頂きました。
大変勉強になりましたー。
ありがとうございますー。
Pingback: HTML/CSS - SanRin舎
http://d.hatena.ne.jp/shim0mura/20110816/1313511237 id:shim0mura

http://d.hatena.ne.jp/shim0mura/20110816/1313511237
cssのみでチェックボックス・ラジオボタンを装飾する方法を発見しました。
css3のセレクタを使うので、 IE7△, IE8△という感じですが。
勉強中

コメント部分の修飾の記事に興味があったので参考にさせていただこうと覗いたのですが妙なことになっていました。これは特定のブラウザだと避けられないバグなのでしょうか？

私の環境はWindows7,Chrome14です。
Webクリエイターボックス

テキストフィールドとテキストエリアの幅を指定してみてはいかがでしょう？
勉強中

＞Webクリエイターボックスさん

こちらのサンプルを拝見したところ幅が飛び出ていたりチェックボックス、ラジオボタンの隠れているはずの画像が見えていたりしたのでキャプチャして貼った物にリンクしていたのですが消えていたみたいでした。

WebクリエイターボックスさんはChromeはあまり視野に入れてらっしゃらないのでしょうか？
Webクリエイターボックス

メインブラウザーはChromeです。
Win7 Chrome, FF, Safari, IE9とMac Chrome, FF, Safariで確認しましたが、４．の完成図と同様に表示されました。
ブラウザーの設定などで表示が違うのかもしれません。
HTMLやCSSでサイズを変更するとうまく表示されると思います。

また、キャプチャのリンクは出会い系サイトにとばされたので非表示にさせて頂きました。
Pingback: メールフォームの体裁を整える。 | 神社のこと。
http://www.next-level-graphix.com/ Keisuke Tanaka

フォームはこの記事を読んで完成することが出来ました。この後メールを送信先の指定などはどのようにしたら良いのでしょうか？初心者ですいません。
Pingback: 少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス
Pingback: CSS | SanRin舎

CSS3とjQueryでフォームを美しく装飾する方法

フォームの仕様

フォーム制作の流れ

1. テキストボックス、セレクトメニュー、テキストエリアの装飾

1-1. まずは部品設置とベースの装飾

HTML

CSS

1-2. グラデーション

CSS

1-3. 角丸

CSS

1-4. ボックスシャドウ

CSS

2. 送信ボタンの装飾

HTML

CSS

3. チェックボックス、ラジオボタンの装飾

3-1. 画像をつくる

3-2. チェックボックス、ラジオボタンを画像に置換

HTML

CSS

3-3. jQueryでクラスを与える

header内でjQueryファイルを読み込む

jQueryコード

CSS

4. 完成！

HTML（header内）

HTML（body内）

CSS

Advertisement

コメント

Web関連記事・お知らせ

Web制作テクニック

インスピレーション・デザイン

Twitter 人気のつぶやき

サイト内検索

本書きました

Twitter

Facebookページ

中の人ってこんな人

フォームの仕様

フォーム制作の流れ

1. テキストボックス、セレクトメニュー、テキストエリアの装飾

1-1. まずは部品設置とベースの装飾

HTML

CSS

1-2. グラデーション

CSS

1-3. 角丸

CSS

1-4. ボックスシャドウ

CSS

2. 送信ボタンの装飾

HTML

CSS

3. チェックボックス、ラジオボタンの装飾

3-1. 画像をつくる

3-2. チェックボックス、ラジオボタンを画像に置換

HTML

CSS

3-3. jQueryでクラスを与える

header内でjQueryファイルを読み込む

jQueryコード

CSS

4. 完成！

HTML（header内）

HTML（body内）

CSS

Advertisement

シェアする

関連する記事

コメント

Web関連記事・お知らせ

Web制作テクニック

インスピレーション・デザイン

Twitter 人気のつぶやき

サイト内検索

本書きました

Twitter

Facebookページ

中の人ってこんな人