Widely available YES。全主要ブラウザで対応済み。Baseline Widely available。本番利用を推奨。
セレクター Widely available

:focus-within

:focus-within は、要素自体またはその子孫要素がフォーカスを持つ場合にマッチする。フォーム全体のハイライトやドロップダウンメニューの表示制御など、親コンテナに対するフォーカス連動スタイルを実現する。

フォームフォーカス

概要

:focus-within は、要素自体またはその子孫要素がフォーカスを持つ場合にマッチする。フォーム全体のハイライトやドロップダウンメニューの表示制御など、親コンテナに対するフォーカス連動スタイルを実現する。

対応ブラウザ

デスクトップ

Chrome 60+
Edge 79+
Safari 10.1+
Firefox 52+

モバイル

Chrome Android 60+
Safari iOS 10.3+
Firefox Android 52+

基本構文

CSS 
.form-group:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.dropdown:focus-within .dropdown-menu {
  display: block;
  opacity: 1;
}

実務での使いどころ

  • フォームグループのハイライト

    入力中のフォームグループ全体をハイライトしてユーザーの注目を誘導。

  • ドロップダウンメニュー

    フォーカスが内部にある間はメニューを表示し続ける。

注意点

  • フォーカスが外れた際のトランジションにも配慮する。
  • 子孫のフォーカスで親がスタイル変更されるため、意図しない範囲に影響しないか確認。

アクセシビリティ

  • フォーカス連動で表示されるコンテンツは Escape キーで閉じられるようにする。

参考リンク