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

入力+サジェスト候補複合タグUI

自由入力欄の下に予測候補タグを一覧表示する複合UIです。サイト内検索のキーワードサジェストや記事タグの入力補助に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-16-07-wrap">
          <div class="d11-16-07-input">
            <span class="d11-16-07-text">デザ</span><span class="d11-16-07-caret"></span>
          </div>
          <div class="d11-16-07-suggest">
            <span class="d11-16-07-item d11-16-07-active">デザイン思考</span>
            <span class="d11-16-07-item">デザインシステム</span>
            <span class="d11-16-07-item">デザインパターン</span>
          </div>
        </div>

CSS

.d11-16-07-wrap{width:100%;max-width:280px;font-family:sans-serif}
        .d11-16-07-input{display:flex;align-items:center;gap:2px;box-sizing:border-box;padding:9px 12px;border:1.5px solid #2563eb;border-radius:8px 8px 0 0;background:#fff}
        .d11-16-07-text{font-size:14px;color:#1f2937}
        .d11-16-07-caret{width:1.5px;height:16px;background:#2563eb}
        .d11-16-07-suggest{display:flex;flex-direction:column;border:1.5px solid #e5e7eb;border-top:none;border-radius:0 0 8px 8px;overflow:hidden}
        .d11-16-07-item{padding:8px 12px;font-size:12.5px;color:#4b5563;background:#fff;border-top:1px solid #f1f5f9}
        .d11-16-07-active{background:#eff6ff;color:#1d4ed8;font-weight:600}

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