パーツ番号 03-16-09 ・ CSSのみ
複数キーワードタグ+候補リストの複合UI
入力欄に確定済みキーワードをタグ表示し、続く候補を下に並べた静止パネルです。WordPress不動産・求人サイトの多条件検索UIのデザイン参考になります。
プレビュー
ソースコード
HTML
<div class="d03-16-09-stage">
<div class="d03-16-09-bar">
<span class="d03-16-09-chip">東京<i>×</i></span>
<span class="d03-16-09-chip">1LDK<i>×</i></span>
<span class="d03-16-09-text">駅近</span>
</div>
<div class="d03-16-09-drop">
<span class="d03-16-09-item">東京 1LDK 駅近 敷金礼金なし</span>
<span class="d03-16-09-item">東京 1LDK 駅近 ペット可</span>
<span class="d03-16-09-item">東京 1LDK 駅近 新築</span>
</div>
</div>CSS
.prev.d03-16-09{padding:0;display:block}
.d03-16-09-stage{
width:100%;height:100%;min-height:260px;box-sizing:border-box;
background:#f1f5f9;padding:24px;position:relative;
}
.d03-16-09-bar{
display:flex;align-items:center;flex-wrap:wrap;gap:7px;background:#fff;border-radius:10px;
border:1px solid #cbd5e1;padding:9px 12px;box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.d03-16-09-chip{
display:inline-flex;align-items:center;gap:6px;background:#eff6ff;color:#2563eb;
font-size:11px;font-weight:700;padding:5px 9px;border-radius:99px;
}
.d03-16-09-chip i{font-style:normal;font-size:10px;color:#93c5fd}
.d03-16-09-text{font-size:12.5px;color:#1e293b;font-weight:600}
.d03-16-09-drop{
position:absolute;left:24px;right:24px;top:70px;
background:#fff;border-radius:10px;border:1px solid #e2e8f0;
box-shadow:0 10px 24px rgba(15,23,42,.1);padding:6px 0;
display:flex;flex-direction:column;
}
.d03-16-09-item{padding:8px 14px;font-size:12px;color:#334155}クラス名 .d03-16-09 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。