パーツ番号 04-15-02 ・ CSSのみ

単一選択済みラジオカード一覧

4択の中から1つが選択された状態を固定表示したラジオリスト。満足度調査やアンケートの単一回答項目デザイン見本として使える。

staticcss

プレビュー

ソースコード

HTML

<ul class="d04-15-02-list">
          <li class="d04-15-02-row"><span class="d04-15-02-circle"></span><span class="d04-15-02-label">とても満足</span></li>
          <li class="d04-15-02-row selected"><span class="d04-15-02-circle"><span class="d04-15-02-dot"></span></span><span class="d04-15-02-label">満足</span></li>
          <li class="d04-15-02-row"><span class="d04-15-02-circle"></span><span class="d04-15-02-label">普通</span></li>
          <li class="d04-15-02-row"><span class="d04-15-02-circle"></span><span class="d04-15-02-label">不満</span></li>
        </ul>

CSS

.d04-15-02-list{list-style:none;margin:0;padding:0;width:100%;max-width:220px}
        .d04-15-02-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1.5px solid #e2e8f0;border-radius:9px;margin-bottom:8px;background:#fff}
        .d04-15-02-row.selected{border-color:#6366f1;background:#eef2ff}
        .d04-15-02-circle{width:18px;height:18px;border-radius:50%;border:2px solid #cbd5e1;display:flex;align-items:center;justify-content:center;flex:none;background:#fff}
        .d04-15-02-row.selected .d04-15-02-circle{border-color:#6366f1}
        .d04-15-02-dot{width:9px;height:9px;border-radius:50%;background:#6366f1}
        .d04-15-02-label{font-size:12.5px;color:#334155}

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