CSS PARENT STATE

:has(input:checked)で、選択中カードをCSSだけで変える

状態を持っているのはinput。見た目を変えたいのは外側のカード。 :has() を使うと、その関係をCSSだけで扱えます。

Radio Card UI カードをクリックすると、選択状態が親カードに反映されます

:has(input:checked)

Starter 小さく始める ¥0 まずは試したい方向け。 Team チームで使う ¥2,400 選択中のカード全体を強調。 Scale 大きく運用する ¥8,800 管理機能まで含めたい方向け。

Core CSS

.plan-card:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: 0 18px 50px var(--brand-shadow);
}

Point

inputの状態を、外側のカードやセクションの見た目に反映できるのが :has() の便利なところです。

:has(input:checked)で、 選択中カードをCSSだけで変える