【:focus擬似クラス】フォーカスされた要素のスタイル

:focus擬似クラスでは、その要素がユーザーの操作によってフォーカス(選択)された時のスタイルを適用することができます。

例えば、フォームの入力フィールドにカーソルを合わせて、テキストが入力できる状態になった時などにスタイルが適用されます。 それ以外にもキーボードのTabキーなどで移動する際にも適用されます。

なお疑似クラスとは、スタイルを適用する対象を要素名や属性名でなく、要素の状態や特徴で分類するものです。 例えばマウスカーソルが要素に乗った時や要素がアクティブにされた時など、他のセレクタでは表せないような状態に対してスタイルを適用することが可能となります。

書式

  • 要素名:focus {プロパティ名:値;} ……… フォーカス(選択)された要素にスタイルを適用

※要素名には、「#id名」や「.クラス名」も指定できます

使用した時の例

input:focus {background-color: #ff69b4;}
<form action="/cgi-bin/sample.cgi" method="post">
  <p>名前:<input type="text" name="name"></p>
  <p>mail:<input type="text" name="mail"></p>
  <p>メッセージ:<input type="text" name="message"></p>
  <p><input type="submit" value="送信" onclick="alert('サンプルのため内容は送信されません'); return false"></p>
</form>

ブラウザ上の表示例

名前:

mail:

メッセージ:

対応ブラウザなどのデータ

適用対象 フォーカスされた要素
対応ブラウザ Internet Explorer , Google Chrome , Firefox , Opera , Safari

関連情報