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

ピルタグ型複数選択チェック

チェックマークの代わりにピル形状の背景色で選択状態を示す見本。宿泊施設の条件絞り込みなどの複数選択項目に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-07-12-row">
          <span class="d04-07-12-pill selected">朝食付き</span>
          <span class="d04-07-12-pill selected">駐車場</span>
          <span class="d04-07-12-pill">Wi-Fi</span>
          <span class="d04-07-12-pill">禁煙</span>
        </div>

CSS

.d04-07-12-row{display:flex;gap:8px;flex-wrap:wrap;max-width:220px}
        .d04-07-12-pill{padding:7px 14px;font-size:11.5px;border-radius:999px;border:1.5px solid #cbd5e1;color:#6b7280;background:#fff}
        .d04-07-12-pill.selected{border-color:#0891b2;background:#0891b2;color:#fff;font-weight:600}

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