フォーカスのある入力フォームの装飾を変化させるCSS

掲示板の投稿欄やアンケートフォームなどには、複数の入力欄が並んでいることが一般的でしょう。入力欄が多数ある場合は、ぱっと見て「今どこに入力可能な状態なのか」が分かりにくいこともありそうです。そんなときには、「今、入力可能な状態になっている欄」(＝フォーカスのある入力欄)だけに対して、動的に装飾が変化するようにデザインしておくと分かりやすいデザインになります。

入力可能状態になっている(＝フォーカスのある)要素の装飾を一時的に変化させるスタイルシート

フォーカスのある入力欄の装飾を一時的に(＝フォーカスのある間だけ)変化させるような動的なデザインは、スタイルシートだけで実現できます。スクリプトは不要です。下記のCSSソースのようにfocus疑似クラスを使えば良いだけです。

要素名:focus {
   /* ～フォーカスがある間に適用するスタイル～ */
}

書き方は簡単で、要素名に対して「:focus」を付加すれば良いだけです。
例えば、以下のようにCSSソースを記述すれば、入力可能な状態になっているフォームに対してだけ背景色を加えたり枠線に色を付けたりできます。

input:focus {
   background-color: #ffffcc; /* 背景色 */
   border: 1px solid red;     /* 枠線 */
}

このように書いておけば、input要素で作られたフォームのうち「フォーカスのある要素」だけ、背景色が淡い黄色(#ffffcc)になり枠線が赤色(red)に変化します。フォーカスがなくなると(＝他の入力欄に移動したり、全く別の場所をクリックしたりすると)元のデザインに戻ります。

上記のスタイルシートを使って入力欄を表示させてみた例は、以下の通りです。3つあるテキスト入力フォームにマウスを載せてみて下さい。装飾が変化するはずです。

ただし、先ほどのCSSソースだと「あらゆるinput要素」を対象に装飾を変化させてしまいます。HTMLでのinput要素は「テキスト入力欄」を作るのにも使われますが、「ボタン」や「チェックボックス」を作るのにも使われます。

なので、このままでは、ボタンをクリックした際にも、ボタンの背景色や枠線色を変化させてしまいます。上記のサンプル中にあるボタンをクリックしてみると、ボタンの装飾も変化してしまうことが分かるはずです。そういう変化になっても構わないのであれば問題ありませんが、そうでない場合は「入力欄決め打ち」で変化するようにスタイルシートを記述する必要があります。

属性セレクタでテキスト入力欄に限定し、「フォーカスのあるテキスト入力欄」だけの装飾を変化させる

ここで便利なのが「属性セレクタ」です。属性セレクタとは、「指定した要素の中で、特定の属性を持つものだけを対象にする」ためのスタイルシートの記述方法です。例えば、テキスト入力欄だけを対象にするには、「input要素のうち、type属性の値がtextになっているもの」だけを対象にできれば良いわけです。

その場合には、以下のようにCSSソースを記述します。

input[type="text"]:focus {
   background-color: #ffffcc;
   border: 1px solid red;
}

上記の、[type="text"]という部分が「属性セレクタ」です。
input[type="text"]で「input要素のうちtype属性がtextなもの」という意味になります。さらにその後、:focusを加えることで、最終的に「input要素のうちtype属性がtextなもので、フォーカスがある場合」という装飾条件を指定したことになります。

上記のCSSソースを適用させて先程のフォームを表示させてみると、以下のようになります。

今度は、ボタンをクリックしてもボタンの装飾は変化しません(※)。なぜなら、ボタンはinput要素で作られるものの、type属性の値は「button」だからです。

※上記で記述したCSSによる装飾(枠線を赤くして背景を淡い黄色にする装飾)の対象にはならない、という意味であって、ブラウザ側が標準で適用するスタイル(ボタンの見た目の変化)がある場合には、装飾は変わって見えます。

このように、フォームを装飾する際は、属性セレクタを活用すると便利です。

なお、上記のサンプルで使用したHTMLソースは以下の通りです。

<form id="sample" action="./">
   <input type="text" size="24" name="sample1" value="SAMPLE1" />
   <input type="text" size="24" name="sample2" value="SAMPLE2" />
   <input type="text" size="24" name="sample3" value="SAMPLE3" />
   <input type="button" value="ボタン" name="sampleB" />
</form>

属性セレクタを使ってフォームの装飾を限定する方法は、別途「input要素のうち、ボタンだけを対象にして装飾するCSS」などでも解説しましたので、そちらもぜひご参照下さい。

(更新日：2017年07月04日)