: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