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

削除アイコン付きタグチップ入力欄

チップの右側に×アイコンを添えた削除可能な見た目のタグ入力欄です。会員プロフィールの趣味タグ登録欄などに活用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-16-02-field">
          <span class="d11-16-02-chip">読書<span class="d11-16-02-x">&times;</span></span>
          <span class="d11-16-02-chip">映画<span class="d11-16-02-x">&times;</span></span>
          <span class="d11-16-02-chip">旅行<span class="d11-16-02-x">&times;</span></span>
        </div>

CSS

.d11-16-02-field{width:100%;max-width:280px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;box-sizing:border-box;padding:10px 12px;border:1.5px solid #cbd5e1;border-radius:8px;background:#fff;font-family:sans-serif}
        .d11-16-02-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 8px 5px 12px;background:#f1f5f9;color:#334155;font-size:12.5px;font-weight:600;border-radius:6px}
        .d11-16-02-x{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#cbd5e1;color:#475569;font-size:11px;line-height:1}

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