"CSS Tips Factory" : Presented by Nishishi via WordPress.

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

掲示板の投稿欄とか、アンケートフォームとかには、複数の入力欄が並んでいることが一般的です。そのとき、「今、入力可能な状態になっている欄」(=フォーカスのある入力欄)だけ、装飾を変化させると分かりやすいデザインになります。

スタイルシートのfocus疑似クラスを使えば、クリックして入力可能な状態になっているフォームにだけ、背景色を加えたり枠線に色を付けたりすることが簡単に実現できます。
最も簡単に記述すれば、以下のようなスタイルシートソースになるでしょう。

input:focus {
   background-color: #ffffcc;
   border: 1px solid red;
}

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

この大変便利な「focus」疑似クラスですが、残念なことにInternet Explorer7でもサポートは見送られました…。FirefoxやOperaでは実装されているので、それらのユーザには見えるのですが。ただ、IEでも(フォーカス時の効果が現れないだけで)特に表示が崩れるような問題にはならないので、使っておいても問題はありません。次期バージョンではきっとサポートされるでしょう。

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

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

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

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

その場合には、以下のようにスタイルシートを記述します。

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

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

これを使ってフォームを表示させてみると、以下のようになります。

今度は、ボタンをクリックしても、ボタンの装飾は変化しません。なぜなら、ボタンはinput要素で作られるものの、type属性の値は「button」だからです。
このように、フォームを装飾する際は、属性セレクタを活用すると便利です。
属性セレクタは、Internet Explorer 7でもサポートされているので使えます。(IE6以下では使えませんが…。どちらにしても、IE7ではfocus疑似クラスが使えないので、今回の装飾は使えないのですが。)

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

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

focus疑似クラスがIE7でサポートされなかったのが残念ですが、まあ今後のバージョンでサポートされるでしょう。きっと。IEでも似たような効果を出す方法として、JavaScriptを活用する方法がありますが、まあそこら辺は別の機会に。(^_^;)

なお、属性セレクタを使ってフォームの装飾を分ける方法は、All Aboutで記事にしているので、そちらもぜひご参照下さい。
→ 「属性セレクタで、スタイルシートを柔軟に!」(@All About)

このCSS TIPSへのコメントはお気軽に! [コメント数: 1 件]

著者紹介

主要なカテゴリ

このCSS TIPSへのコメント・トラックバック

コメント数: 1 件

  1. コメントフォームをCSSで弄くる…

    コメントボックスをCSSでユーザビリティーアップ
    Blogのコメントボックスは名前、メール、URL、テキストボックスと4つしかないのですが、マウスをテキストボックスに (more…)

    トラックバック by レディーファースト — 2007/9/28 金曜日 15:09:04

コメント投稿欄 このCSS TIPSに対するコメント投稿を歓迎します。

(必須)

(必須) ※公開されません

※公開(リンク)されます

コメント:

※投稿内容によってはフィルタによって保留扱いとなる場合があります。その場合は承認後に掲載されます。
※本文中にURLっぽい文字列を記述すると、投稿内容はスパム扱いとなって無視されてしまう場合がありますので書かないようご注意下さい。

トラックバック

このCSS TIPSへのトラックバックURLは以下の通りです。

※言及リンクがないトラックバックは拒否されますのでご注意下さい。