We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

/* フォーカスを持つ <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;
}

結果

仕様書

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

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1 あり1871
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応1 ? あり461 ?

関連項目

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, ethertank, sosleepy
最終更新者: mfuji09,