:focus

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

試してみましょう

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

構文

css
:focus {
  /* ... */
}

例

HTML

html
<div><input class="red-input" value="フォーカスで赤くなります。" /></div>
<div><input class="blue-input" value="フォーカスで青くなります。" /></div>

CSS

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 にすることを要求しています。

:focus { outline: none; }

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

仕様書

Specification
HTML Standard
# selector-focus
Selectors Level 4
# focus-pseudo

ブラウザーの互換性

BCD tables only load in the browser

関連情報