2016.10.05
WEB

CSSの:focus擬似クラスを使って、入力中のフォームをデザインしてみる

CSSの「:hover」擬似クラスを使ってマウスオーバーした時のスタイルを変更させることが良くあると思います。

「:hover」擬似クラス程使用頻度は高くないかもしれませんが、「:focus」擬似クラスを使うことで、入力フォームにフォーカスした時のスタイルを変更できます。:focus擬似クラスを使ってフォームのスタイルを変更することで、入力項目についての補足情報を入れたり、ユーザーが今どのフォームにフォーカスしているかを分かりやすくすることが出来ます。

今回は:focus擬似クラスを使い、フォームにフォーカスした時のデザインを３つ作成しましたので、作り方などご紹介いたします。

1 :focus擬似クラスの概要
2 :focus擬似クラスを使ってフォームをスタイリング
3 まとめ

:focus擬似クラスの概要

:focus擬似クラスとは

:focus擬似クラスは、要素にフォーカスがあるときに適用される擬似クラスです。（そのままですね、すみません。。。。）

Webページの操作可能な要素にフォーカスすると、下記図のようになります。

通常時とフォーカス時の比較

要素に:focus擬似クラスを付与することによって、フォーカス時のスタイルを設定できます。

:focus擬似クラスのブラウザ対応

:focus擬似クラスは、CSS2.1からある老舗擬似クラスなので、特にブラウザ対応は心配する必要はありません。

CSS 2.1 selectors | Can I use… Support tables for HTML5, CSS3, etc

:focus擬似クラスの使い方

:hover擬似クラスと使い方は同じです。CSSでフォーカス時のスタイルを適用したい要素に対して「:focus」を付与します。

下記のようなhtmlがあったとします。


<form action="******" method="post">
  <label for="name">名前</label><input id="name" type="text" />
  <button type="submit">送信</button>
</form>

テキスト入力中に背景の色を変えたい場合は、下記のようにCSSを記述します。


input[type="text"] { background-color: red;}
/* inputにフォーカスしたとき、背景が青になります */
input[type="text"]:focus { background: blue;}

:focus擬似クラスを使ってフォームをスタイリング

それでは、:focus擬似クラスを使ってフォーカスしたときのスタイリングをしてみたいと思います。今回は、３パターンのデザインを作成します。

ユーザーが今どのフォームに入力をしているかを分かりやすくするデザイン
ツールチップを出現させて、入力に関する補足情報を表示するデザイン
ボタンっぽいけど、フォーカス（クリック）すると入力欄が現れる検索フォーム

:focus擬似クラスの下準備～デフォルトのスタイルを消す～

Webページにinput等のフォーム部品を設置した際、こちらで:focus擬似クラスでスタイルを設定しなくても、ブラウザのデフォルトCSSでフォーカス時のスタイルが設定されています。

フォーカススタイルを自分で変更したい時は、まずはブラウザのデフォルトCSSをリセットします。（ざっくり調べですが、主要なリセットCSSでは:focusのスタイルはリセットしてくれないので、自分でリセットする必要があります。）

ChromeやFirefoxでは、デフォルトCSSで青い縁取りが出てハイライトされる設定になっています。こちらは、borderかと思いきやoutlineというプロパティで設定されています。outlineプロパティの方がレイアウトに影響を与えないからでしょうか。

borderとoutlineの違いについて詳しく知りたい方はこちらへ
borderプロパティとoutlineプロパティの違い

フォーカスする可能性があるのは、input要素、textarea要素、select要素などでしょうか。その中で、スタイル変更の可能性があるもの関して、下記のスタイルを設定します。

セレクタ { outline: none;}

これで、フォーカスしたときのハイライトが消えるかと思うので、ここからスタイリングに入ります。

今回は横着をして、*(アスタリスク)でoutline:none;を指定しました。

box-shadowとborderで入力中の場所を分かりやすく

デフォルトCSSでも十分わかりやすいのですが、サイトのデザインによってはスタイルでより見やすくする必要があるかもしれません。

下記図のようなフォームをデザインします。

:focus擬似クラスでbox-shadowとborderを変更

まず、下記のhtmlを用意します。


<form action="" method="get">
  <label for="item1">項目1</label><input id="item1" type="text" />
  <label for="item2">項目2</label><input id="item2" type="text" />
  <label for="item3">項目3</label><input id="item3" type="text" />
  <label for="item4">項目4</label><input id="item4" type="text" />
  <label for="item5">項目5</label><input id="item5" type="text" />
</form>

次に、input要素にスタイルをあてていきます。(:focusに関係のない要素のスタイルは省略しております。)


input {
/*基本のスタイル*/
display: block;
margin-bottom: 25px;
width: 300px;
height: 50px;
border-radius: 5px;
/*テキスト入力のエリアを調整*/
padding: 20px;
/* このプロパティを変更します*/
border: solid 2px #ccc;
/*このプロパティを変更します*/
box-shadow: none;
/*フォーカスしたときのトランジション設定 すべてのプロパティが0.5秒で切り替わる*/
transition: all 0.5s;
}

続いて、input要素に:focus擬似クラスをつけたセレクタに、フォーカス後のスタイルをあてます。


input:focus {
/*フォーカスした時に影をつける*/
box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.4);
/*フォーカスした時に枠線を太く濃く*/
border: solid 2px #666;
}

これで、完成です。デモは下記からご覧ください。

デモ

ツールチップを表示して、補足情報を伝える

フォーカスしたときに、その入力項目に関する補足情報をツールチップで表示することもできます。通常時に注意書きを入れると、情報が多くなって煩雑になるフォーム周りをすっきりさせることができます。

:focus擬似クラスでツールチップを表示

下記のhtmlを用意します。


<form action="" method="get">
  <label for="name01">お名前(漢字)</label><input id="name01" type="text" /><span class="arrow_box">漢字で入力してください</span>
  <label for="name02">お名前(カタカナ)</label><input id="name02" type="text" /><span class="arrow_box">カタカナで入力してください</span>
  <label for="user">ユーザー名</label><input id="user" type="text" /><span class="arrow_box">半角英数字で入力してください</span>
  <label for="pass">パスワード</label><input id="pass" type="password" /><span class="arrow_box">16文字以上にしてください</span>
</form>
<!-- <span class="arrow_box"></span>はツールチップで表示する補足情報の部分です。 -->

続いて、CSSを記述します。せっかくなので、最初のサンプルをベースに作りたいと思います。

input要素とツールチップ(.arrow_box)にフォーカス前のスタイルをあてます。


input {
/*基本のスタイル*/
display: inline-block;
margin-bottom: 25px;
width: 300px;
height: 50px;
border: solid 2px #ccc;
border-radius: 5px;
box-shadow: none;
padding: 20px;
/*フォーカスしたときのトランジション設定 すべてのプロパティが0.5秒で切り替わる*/
transition: all 0.5s;
}

span {
/*フォーカスしていないときは非表示に*/
display: none;
/*input要素にスタイルを合わせます*/
box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.4);
}

続いて、フォーカスした時のスタイルをあてます。


input:focus {
/*input要素にフォーカスした時の影と枠をつける*/
box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.4);
border: solid 2px #666;
}

input:focus + span {
/*フォーカスしたらツールチップを表示させる*/
display: inline;
}

これで完成です。:focusは隣接している要素に対しても有効なようです。これを利用すれば、labelを変化させたりもできますね。

デモ

ボタン風な伸縮する検索フォームをつくる

フォーム部分はテキスト入力エリアを確保しなければいけないので、どうしてもスペースをとりがちだと思います。下記のように最初はボタンっぽくしておけば、フォーカスしていないときのスペースを節約することができます。

:focus擬似クラスで伸縮する検索フォーム

まずは、下記のhtmlを用意します。

<form action="" method="post"><input class="search" type="text" /></form>

続いて、フォーカスする前のスタイルをあてます。


input {
/*基本のスタイル*/
width: 50px;
height: 50px;
border: solid 2px #666666;
border-radius: 25px;
/*テキスト入力のエリアを調整*/
padding: 20px;
/*虫眼鏡アイコンを背景で指定*/
background-image: url("../img/search.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 25px;
/*フォーカスしたときのトランジション設定 すべてのプロパティが0.5秒で切り替わる*/
transition: all 0.5s;
}

今回は丸いボタンの形ですが、border-radiusをpx（ピクセル）で指定しています。フォーカス時に横幅を伸ばすので、％（パーセント）で指定すると形がずれてしまうためです。

次に、フォーカスした時のスタイルです。


input:focus {
/*フォーカスした時に横に伸ばす*/
width: 300px;
/*フォーカスした時の虫眼鏡アイコンの位置調整*/
background-position: 96% 50%;
/*テキスト入力が虫眼鏡アイコンに被らないように*/
padding-right: 50px;
}

これで完成です。

デモ