にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

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

複数の入力欄が並んでいるとき、ぱっと見て「今どこに入力可能な状態なのか」が分かりにくいこともあります。そんなとき「今、入力可能な状態になっている欄」(=フォーカスのある入力欄)だけ、装飾を変化させると分かりやすくなります。カーソルの入ったテキスト入力欄、選択したばかりのチェックボックスなど、フォーカスのある入力フォームの装飾だけを一時的に変化させるCSSの書き方を解説。

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

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

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

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

CSSソース

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

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

CSSソース

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

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

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

入力欄1:
入力欄2:
入力欄3:

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

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

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

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

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

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ソースを適用させて先程のフォームを表示させてみると、以下のようになります。

入力欄1:
入力欄2:
入力欄3:

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

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

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

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

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」などでも解説しましたので、そちらもぜひご参照下さい。

()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---