入力中のフォーム全体を強調したい：focus-withinで親の枠を切り替えよう

入力欄がいくつか並ぶ画面で、今どのまとまりを操作しているか分かりづらい。入力欄自身のフォーカス表示に加えて、親のグループも強調する方法を試してみよう。

この記事では、名前とメモの二つの入力欄を使う。架空の内容だけを扱い、送信や保存はしない。ブラウザで操作できる作例と、最初へ戻すボタンを用意したよ。

自分だけでなく、内側のフォーカスにも反応する

:focus-withinは、その要素自身、または内側の要素がフォーカスを持つときに合うCSSの擬似クラス。親をJavaScriptで毎回探して、色を付け直す方法だけが選択肢ではないんだ。

.input-group:focus-within {
  border-color: #5445df;
  background: #f1efff;
}

この指定は、何かが入力されたか、保存できたかを表すものではない。今フォーカスがある範囲を、見た目でも補うために使うよ。

作例の二つの入力欄を移動する

1. 作例の「名前」を選び、グループの枠が紫になることを見る。
2. Tabキーなどで「メモ」へ移り、親の強調が続くか確かめる。
3. 外側の「グループの外へ」ボタンへ移る。
4. 親の枠が通常の色へ戻ることを確認する。
5. リセットで架空の名前と空のメモへ戻す。

編集部では、内側の二つの欄で:focus-withinが合い、外側へ移ると合わなくなることをブラウザで確認した。マウスで押す場合だけでなく、キーボードでの移動も見てみよう。

:focusと:focus-visibleを置き換えるものではない

親が強調されても、どの入力欄にいるかまでは分からない場合がある。入力欄のフォーカス表示を全部消して、グループの背景色だけへ置き換えないようにしよう。

枠の太さを変えると、周りも動く？

通常時は枠なし、入力中だけ太い枠にすると、箱の寸法が変わって周りが動く場合がある。作例では枠の太さをそろえ、色と背景を変える形にしている。

outlineなど別の表現を選ぶ場合も、端で切れないか、周りの文字や操作へ重ならないかを確認する。色だけに頼らず、入力欄のラベルやグループの見出しも残したいね。

グループを大きくしすぎない

ページ全体を一つの親として強調すると、細かな現在位置を伝える助けになりにくい。住所、連絡先など、意味のあるまとまりを先に決めよう。

画面の見た目をまとめることと、読み上げで関係を伝えることも別。必要に応じてfieldsetとlegendなどの意味付けを確認し、親の色だけで情報を閉じないようにする。

入力欄の名前はlabelの基本、状態の違いはフォーカスと選択中へ。

参照した公式資料

• MDN：:focus-within

確認日：2026年10月26日。