パーツ番号 10-09-12 ・ CSSのみ

人数セレクター(固定・選択済み表示)

予約人数の候補をチップ状に並べ、選択中の人数を色で示す表示。飲食店やイベントの人数指定フォームに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <p class="label">ご利用人数</p>
          <div class="chips">
            <span>1名</span><span>2名</span><span class="on">3名</span><span>4名</span><span>5名以上</span>
          </div>
        </div>

CSS

.d10-09-12 .wrap{ width:100%; max-width:240px; }
        .d10-09-12 .label{ margin:0 0 8px; font-size:11px; color:#8a8f98; }
        .d10-09-12 .chips{ display:flex; flex-wrap:wrap; gap:6px; }
        .d10-09-12 .chips span{ font-size:11.5px; color:#5a606b; background:#f4f5f7; padding:6px 11px; border-radius:999px; }
        .d10-09-12 .chips span.on{ background:#3f6fe0; color:#fff; font-weight:700; }

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