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

基本チップ型タグ入力欄

選択済みのタグが枠内にチップ状に並ぶ、最もシンプルなタグ入力欄の見た目です。ブログ投稿画面のタグ設定欄やアンケートフォームのキーワード入力に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-16-01-field">
          <span class="d11-16-01-chip">デザイン</span>
          <span class="d11-16-01-chip">コーディング</span>
          <span class="d11-16-01-chip">WordPress</span>
          <span class="d11-16-01-caret"></span>
        </div>

CSS

.d11-16-01-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-01-chip{display:inline-block;padding:5px 12px;background:#eef2ff;color:#3730a3;font-size:12.5px;font-weight:600;border-radius:14px}
        .d11-16-01-caret{width:1.5px;height:16px;background:#94a3b8}

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