パーツ番号 11-16-05 ・ CSSのみ

上限数表示付きタグ入力欄

選択数と上限を「3/5」のように併記するタグ入力欄です。会員登録時の興味関心タグ選択など、選択数に制限のあるフォームに向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-16-05-wrap">
          <div class="d11-16-05-head">
            <span class="d11-16-05-label">興味のあるジャンル</span>
            <span class="d11-16-05-count">3<i>/5</i></span>
          </div>
          <div class="d11-16-05-field">
            <span class="d11-16-05-chip">アウトドア</span>
            <span class="d11-16-05-chip">音楽</span>
            <span class="d11-16-05-chip">写真</span>
          </div>
        </div>

CSS

.d11-16-05-wrap{width:100%;max-width:280px;display:flex;flex-direction:column;gap:8px;font-family:sans-serif}
        .d11-16-05-head{display:flex;align-items:center;justify-content:space-between}
        .d11-16-05-label{font-size:13px;font-weight:600;color:#374151}
        .d11-16-05-count{font-size:12px;font-weight:700;color:#f59e0b;background:#fffbeb;padding:2px 8px;border-radius:10px}
        .d11-16-05-count i{font-style:normal;color:#d1a15c}
        .d11-16-05-field{display:flex;flex-wrap:wrap;gap:6px;box-sizing:border-box;padding:10px 12px;border:1.5px solid #cbd5e1;border-radius:8px;background:#fff}
        .d11-16-05-chip{padding:5px 12px;background:#fef3c7;color:#92400e;font-size:12.5px;font-weight:600;border-radius:14px}

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