CSS :focus パseudoクラス

定義と使用方法

CSS :focus パseudoクラスは、フォーカスを取得した要素のスタイルを選択および設定するために使用されます。

インスタンス

例1

フォーカスを取得した入力フィールドのスタイルを選択および設定します：

input:focus {
  background-color: yellow;
}

実際に試してみる

例2

入力フィールドがフォーカスを取得したとき、背景色と幅を変更します：

input:focus {
  background-color: yellow;
  width: 250px;
}

実際に試してみる

CSS文法

:focus {
  css宣言;
}

技術的詳細

バージョン： CSS2

ブラウザのサポート

テーブルの数字は、そのパseudoクラスを完全にサポートする最初のブラウザのバージョンを指定しています。

Chrome Edge Firefox Safari Opera
4.0 8.0 2.0 3.1 9.6

関連ページ

チュートリアル：CSS 伪类