Caution

お使いのブラウザはJavaScriptが無効になっております。
当サイトでは検索などの処理にJavaScriptを使用しています。
より快適にご利用頂くため、JavaScriptを有効にしたうえで当サイトを閲覧することをお勧めいたします。

CSS辞典

トップページ
CSS辞典
【CSSセレクタ】E:focus

【CSSセレクタ】E:focus

『セレクタ:focus』で、フォーカス中の要素の要素に適用できます。フォーカス中とはフォームの入力やキーボードの『tab』キーなどでa要素などを選択している状態のことを指します。こちらは一般に『擬似クラス』(:focus擬似クラス)と呼ばれます。

サンプルコード

style.css

/* テキスト入力中の背景色を変更 */
input:focus { background-color: yellow;}

/* テキストエリアにフォーカスしたときのスタイル */
textarea:focus { border: 2px solid #3498db; outline: none;}

/* リンクにフォーカスしたときのスタイル（キーボードナビゲーション） */
a:focus { outline: 3px solid #e74c3c; outline-offset: 2px;}

/* ボタンにフォーカスしたときのスタイル */
button:focus { box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.5); outline: none;}

/* フォーカスが当たった要素の中にある子要素へのスタイル */
.form-group:focus-within { background-color: #f0f8ff;}

ブラウザでの表示結果

input:focus { background-color: yellow;} /* 文字入力中(フォーカス中)のinput要素の背景色を黄色にします。 */

<p>入力中は背景色が変わります: <input type="text"></p>

対応ブラウザ

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

1 以降 ○

Edge

12 以降 ○

11 ○

10 ○

9 ○

8 ○

7 ×

6 ×

Opera

7 以降 ○

6 以前 ×

モバイル

iOS Safari

1 以降 ○

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android