モダンCSS・プラットフォーム
:has() 選択式カード
ラジオを隠したプラン選択カード。選ぶとそのカードだけ枠と背景が変わり、チェックが点く。:has()だけで実現しJSは不要。
プレビュー
クリック
操作クリック／タップで動きます。
実装メモ
:has() 関係擬似クラスで「中のラジオが checked である label」を選び、選択カードだけを装飾しています。ラジオ自体は視覚的に隠しつつネイティブのまま残すので、キーボード操作・アクセシビリティは保たれ、JavaScriptは不要です。:has() は主要ブラウザで広く利用可能です。
コード（コピーして使えます）
<fieldset class="hs-group">
<legend class="hs-legend">プランを選択</legend>
<label class="hs-card">
<input type="radio" name="plan" value="free">
<span class="hs-check" aria-hidden="true">✓</span>
<span class="hs-name">Free</span>
<span class="hs-price">¥0<small>/月</small></span>
<span class="hs-note">個人利用向けの基本機能</span>
</label>
<label class="hs-card">
<input type="radio" name="plan" value="pro" checked>
<span class="hs-check" aria-hidden="true">✓</span>
<span class="hs-name">Pro</span>
<span class="hs-price">¥1,280<small>/月</small></span>
<span class="hs-note">制限解放とチーム共有</span>
</label>
<label class="hs-card">
<input type="radio" name="plan" value="team">
<span class="hs-check" aria-hidden="true">✓</span>
<span class="hs-name">Team</span>
<span class="hs-price">¥3,800<small>/月</small></span>
<span class="hs-note">管理機能と優先サポート</span>
</label>
</fieldset>