:focus擬似クラス

:focus擬似クラスは対象の要素の上にフォーカスがある場合に要素が対象となります。ほとんどの要素に適用できます。使い方は次の通りです。 

要素名:focus {
  プロパティ: 値;
}

※:focus擬似クラスはIE6及びIE7では未サポートです。

要素にフォーカスが移って来た時にスタイルが適用されます。マウスで要素をクリックした場合や、タブを使ってフォーカスを移動してきた時に適用されます。

サンプル

では簡単なサンプルで試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <title>CSSの書式</title>
    <style type="text/css">
    input[type=text]:focus {
      color: #ffffff;
      background-color: #3f3f3f;
    }
    </style>
  </head>

  <body>

    <p>
    アンケートにご協力下さい。
    </p>

    <form action="#" method="post">
    <p>
    名前：<input type="text" name="text1" size="10" /><br />
    住所：<input type="text" name="text2" size="10" /><br />
    <input type="submit" name="button" />
    </p>
    </form>

  </body>
</html>

実際にブラウザで見てみると下記のようになります。

:focus擬似クラス

フォーム内のテキストボックスにフォーカスを移すと次のようにスタイルが適用されます。

:focus擬似クラス

フォーカスを別へ移すと元のスタイルが適用されます。

:focus擬似クラス

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

初心者～中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。