CSSだけで入力しやすいフォームを簡単に実装する方法

皆さんこんにちは、サポート部の山本です。厳しい残暑もやっと終わりを迎え、逆に朝晩の冷え込みが強くなってきています。気温の変化は体調を崩す要因にもなりますので、皆さん気をつけて下さい。

さて今回はECサイトでもよく使われている「フォーム」を簡単に入力しやすく装飾できる方法をご紹介したいと思います。

1. 様々な場面で使われる「フォーム」
2. フォーム入力エリアを広げる
3. フォーカスしたときに入力欄の色を変える
4. フォーカスした時に入力欄の幅を伸ばす
5. 確認（送信）ボタンを押しやすく
6. 実装完了
7. まとめ

様々な場面で使われる「フォーム」

ECサイトではメルマガ登録フォームや問い合わせフォーム、注文者情報入力フォーム等、さまざまな場面で利用されています。今回はCSSだけでフォームを簡単に装飾してみます。

まず初めに以下URLを見てください。
https://ssl.aispr.jp/yamay/form/inquiry/

シンプルですが、いかにも地味でフォーム欄も小さく入力しやすいとは言えないですね。これをベースに装飾していきましょう。

フォーム入力エリアを広げる

まずは以下を追記してテキストインプットとテキストエリアの基本装飾をしましょう。

input[type="text"],
textarea {
	padding: 0.8em;
	outline: none;
	border: 1px solid #DDD;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	font-size: 16px;
}
textarea {
    width: 300px;
}

これだけでも随分見やすくなりましたね。

フォーカスしたときに入力欄の色を変える

以下を追加することで入力欄を選択しているときに、そのスタイルを変更することができます。

input[type="text"]:focus,
texture:focus {
	box-shadow: 0 0 7px #3498db;
	border: 1px solid #3498db;
}

下図のような感じです。

自分が今どのエリアで入力しているのかがわかりやすくなります。

フォーカスした時に入力欄の幅を伸ばす

次に以下を追記するとフォーカス時、入力欄の幅をアニメーションで伸ばすことができます。

input[type="text"] {
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	transition: all .3s;
	width: 200px;
}
input[type="text"]:focus {
	width: 300px;
}

下図のように入力フォームの横幅が、フォーカスしてるときに伸びます。

確認（送信）ボタンを押しやすく

最後はフォーム内容を送信する際のボタンを大きくまた押しやすく調整してみます。CSSは以下を追加してください。

input.sysNextSubmit {
	border-radius: 0;	
	background: -moz-linear-gradient(top, #FFF 0%, #EEE);
	background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
	border: 1px solid #DDD;
	color: #111;
	padding: 10px 30px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
input.sysNextSubmit:hover {
	background: -moz-linear-gradient(top, #EFEFEF 0%, #EEE);
	background: -webkit-gradient(linear, left top, left bottom, from(#EFEFEF), to(#EEE));
}

小さすぎるとタップしにくいので大きめにしておきましょう。