:focus

:focus は CSS の擬似クラスで、フォーカスを持っている (フォームの入力のような) 要素を表します。普通はユーザーが要素をクリックやタップをしたり、キーボードの［タブ］キーで選択したりしたときです。

/* フォーカスを持つ <input> 要素を選択 */
input:focus {
  color: red;
}

メモ: この擬似クラスはフォーカスを持つ要素に対してのみ適用されます。フォーカスを持つ要素を含む要素を選択したい場合は、 :focus-within を使用してください。

構文

:focus

例

HTML

<input class="red-input" value="I'll be red when focused."><br>
<input class="blue-input" value="I'll be blue when focused.">

CSS

.red-input:focus {
  background: yellow;
  color: red;
}

.blue-input:focus {
  background: yellow;
  color: blue;
}

結果

アクセシビリティの考慮事項

視覚的なフォーカスインジケーターが、弱視の人々からも見えるように確認してください。これは外光が明るい場所 (太陽の下の屋外など) で画面を使用するすべての人にも利益になります。 WCAG 2.1 SC 1.4.11 Non-Text Contrast は、視覚的なフォーカスインジケーターを少なくとも 3:1 にすることを要求しています。

Accessible Visual Focus Indicators: Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators

`:focus { outline: none; }`

WCAG 2.1 SC 1.4.11 Non-Text Contrast を満たすフォーカスの輪郭線で置き換えることなく、フォーカスの輪郭線 (視覚的なフォーカスインジケーター) を単に削除しないでください。

Quick Tip: Never remove CSS outlines

仕様書

仕様書	状態	備考
HTML Living Standard :focus の定義	現行の標準	HTML に依存した意味論を定義。
Selectors Level 4 :focus の定義	草案	変更なし。
Selectors Level 3 :focus の定義	勧告	変更なし。
CSS Level 2 (Revision 1) :focus の定義	勧告	初回定義。

ブラウザーの互換性

BCD tables only load in the browser