Live Demo
マウスを乗せるか、Tabキーで操作して変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<section class="tbx-1061" aria-label="検索候補プレビュー">
<label for="tbx-1061-input">サイト内を探す</label>
<div class="tbx-1061__field"><span aria-hidden="true">⌕</span><input id="tbx-1061-input" type="search" placeholder="例：制作事例" autocomplete="off"></div>
<div class="tbx-1061__suggest"><b>よく探される項目</b><p><span>制作事例</span><span>料金の目安</span><span>お問い合わせ</span></p><small>候補表示のデザインデモ</small></div>
</section>
CSS
.tbx-1061{width:min(300px,100%);font:12px/1.45 system-ui,sans-serif;color:#2b4659;position:relative;padding:8px 1px 84px}
.tbx-1061>label{display:block;font-size:11px;letter-spacing:.02em;font-weight:800;margin-bottom:9px}
.tbx-1061__field{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #cad7e1;border-radius:9px;padding:0 12px;height:46px;transition:border-color .22s,box-shadow .22s}
.tbx-1061__field span{font-size:27px;line-height:1;color:#547d8e;transition:transform .25s}.tbx-1061__field input{border:0;outline:none;min-width:0;width:100%;font-size:12px;background:transparent;color:#233d52}
.tbx-1061:is(:hover,:focus-within) .tbx-1061__field{border-color:#559e9c;box-shadow:0 0 0 3px #6dc0bd25}.tbx-1061:is(:hover,:focus-within) .tbx-1061__field span{transform:scale(1.12)}
.tbx-1061__suggest{position:absolute;top:81px;left:0;width:100%;background:#fff;border:1px solid #d9e4e7;border-radius:9px;box-shadow:0 11px 23px #213f551a;padding:12px;z-index:1;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s,transform .22s,visibility .22s}
.tbx-1061:is(:hover,:focus-within) .tbx-1061__suggest{opacity:1;visibility:visible;transform:translateY(0)}
.tbx-1061__suggest>b{font-size:10px}.tbx-1061__suggest p{display:flex;gap:5px;flex-wrap:wrap;margin:9px 0 6px}.tbx-1061__suggest p span{font-size:9px;padding:5px 7px;background:#f0f5f6;border-radius:5px}.tbx-1061__suggest small{font-size:9px;color:#7d8d96}
@media(prefers-reduced-motion:reduce){.tbx-1061__field,.tbx-1061__field span,.tbx-1061__suggest{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Search / Navigation
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末向けにフォーカス・選択・開閉の操作を用意。ホバー専用の追加説明は常時読めるよう配慮します。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。CSS :has()を使用する素材では対応ブラウザを確認してください。
Reduced Motion：prefers-reduced-motion: reduce に対応。