パーツ番号 04-07-04 ・ CSSのみ

カード選択型ラジオ(枠強調)

カード全体の枠線と背景色で選択状態を示すラジオデザイン。料金プラン比較などの選択UIに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-07-04-row">
          <div class="d04-07-04-card">
            <span class="d04-07-04-dot"></span>
            <span class="d04-07-04-label">プランA</span>
          </div>
          <div class="d04-07-04-card selected">
            <span class="d04-07-04-dot"></span>
            <span class="d04-07-04-label">プランB</span>
          </div>
        </div>

CSS

.d04-07-04-row{display:flex;gap:14px}
        .d04-07-04-card{width:96px;padding:14px 10px;border:2px solid #e2e8f0;border-radius:10px;text-align:center;background:#fff}
        .d04-07-04-card.selected{border-color:#7c3aed;background:#f5f3ff}
        .d04-07-04-dot{display:block;width:16px;height:16px;margin:0 auto 8px;border-radius:50%;border:2px solid #cbd5e1;background:#fff}
        .d04-07-04-card.selected .d04-07-04-dot{border-color:#7c3aed;background:#7c3aed}
        .d04-07-04-label{font-size:12px;color:#334155}

クラス名 .d04-07-04 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。