CSS parent state

:has()で親カードを変える

子要素の入力・選択・チェック状態を見て、カード全体の見た目を切り替えます。小さなフォームUIなら、状態表現をCSSだけで作れます。

JavaScript 0 lines

Account setup

入力すると、親のカード全体が完了状態に変わります。

:has()

1 Display name 入力済みならカードを強調

2 Plan 選択済みならカードを完了状態に

Starter small team Pro product team

3 Region select の valid 状態も親に反映

4 Confirm checkbox が checked なら親カードを変更

内容を確認しました

✓

Parent style from child state

:has() を使うと、input の状態を見て外側の card にスタイルを当てられます。

core css

.field-card:has(input:checked),
.field-card:has(select:valid),
.field-card:has(.text-input:not(:placeholder-shown)) {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}