パーツ番号 03-10-10 ・ CSSのみ

絞り込みチップ(選択済みタグ表示)付きフィルターバー

選択中の絞り込み条件をチップ形式で並べる静止したフィルターバーです。WordPressの検索結果ページや商品一覧ページの適用中フィルター表示に応用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d03-10-10-bar">
          <span class="d03-10-10-label">絞り込み中:</span>
          <span class="d03-10-10-chip">価格: 〜¥5,000<span class="d03-10-10-x">×</span></span>
          <span class="d03-10-10-chip">色: ブラック<span class="d03-10-10-x">×</span></span>
          <span class="d03-10-10-chip">サイズ: M<span class="d03-10-10-x">×</span></span>
          <span class="d03-10-10-clear">すべて解除</span>
        </div>

CSS

.d03-10-10-bar{display:flex;flex-wrap:wrap;align-items:center;gap:9px;width:100%}
        .d03-10-10-label{font-size:12px;font-weight:700;color:#64748b}
        .d03-10-10-chip{
          display:inline-flex;align-items:center;gap:7px;
          background:#eff6ff;color:#2563eb;font-size:11.5px;font-weight:600;
          padding:6px 10px;border-radius:99px;
        }
        .d03-10-10-x{
          width:14px;height:14px;border-radius:50%;background:#dbeafe;color:#2563eb;
          font-size:10px;line-height:14px;text-align:center;
        }
        .d03-10-10-clear{font-size:11.5px;font-weight:700;color:#94a3b8;text-decoration:underline;margin-left:4px}

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