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

色分けラベルタグ入力欄

タグごとに異なる背景色を割り当てて意味を区別できるようにした入力欄です。タスク管理ツールのステータスラベル選択欄に応用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-16-06-field">
          <span class="d11-16-06-chip d11-16-06-c1">重要</span>
          <span class="d11-16-06-chip d11-16-06-c2">進行中</span>
          <span class="d11-16-06-chip d11-16-06-c3">レビュー待ち</span>
          <span class="d11-16-06-chip d11-16-06-c4">完了</span>
        </div>

CSS

.d11-16-06-field{width:100%;max-width:280px;display:flex;flex-wrap:wrap;gap:7px;font-family:sans-serif}
        .d11-16-06-chip{padding:6px 13px;border-radius:6px;font-size:12px;font-weight:700;color:#fff}
        .d11-16-06-c1{background:#ef4444}
        .d11-16-06-c2{background:#3b82f6}
        .d11-16-06-c3{background:#f59e0b}
        .d11-16-06-c4{background:#22c55e}

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