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

2014年8月22日
CSS, jQuery

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

↑私が10年以上利用している会計ソフト！

フォームの仕様

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("https://www.webcreatorbox.com/sample/images/checkbox.png") no-repeat top left;
		margin-right:20px;
		padding-left:22px;
		}
	
	.radiolabel{
		background: url("https://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」「CSS」「JS」タブをご覧ください！

See the Pen Form styling by Mana (@manabox) on CodePen.

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

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