Live Demo
マウスでホバーするかTabキーで対象にフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1264"><div class="search"><label for="tbx-1264-input">FIND IN THE LIBRARY</label><span class="field"><span aria-hidden="true">⌕</span><input id="tbx-1264-input" type="search" placeholder="Search resources" autocomplete="off" /></span><span class="hints"><span>Search scope</span><span class="chips"><span>All blocks</span><span>CSS</span><span>UI</span></span></span></div></div>CSS
.tbx-1264{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;min-height:218px;overflow:visible;padding:24px 18px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#243e43}
.tbx-1264 *,.tbx-1264 *::before,.tbx-1264 *::after{box-sizing:border-box}
.tbx-1264{background:#eef1f4}
.tbx-1264 .search{width:min(310px,100%);background:white;border:1px solid #ced6de;padding:20px 19px;box-shadow:0 8px 22px #33485b16}
.tbx-1264 .search label{display:block;font-size:9px;letter-spacing:.18em;font-weight:800;color:#5a7387;margin-bottom:10px}
.tbx-1264 .field{height:39px;display:flex;align-items:center;gap:9px;border-bottom:2px solid #bacbd4;color:#577285;transition:border-color .3s}
.tbx-1264 .field>span{font-size:26px;line-height:1}
.tbx-1264 .field input{min-width:0;width:100%;border:0;background:transparent;color:#203847;font-size:14px;outline:0}
.tbx-1264 .field input::placeholder{color:#9ca8b3}
.tbx-1264 .hints{display:grid;grid-template-columns:1fr;gap:8px;overflow:hidden;max-height:0;opacity:0;transform:translateY(-7px);transition:max-height .38s,opacity .3s,transform .38s}
.tbx-1264 .hints>span:first-child{font-size:10px;color:#698093}
.tbx-1264 .chips{display:flex;gap:5px;flex-wrap:wrap}
.tbx-1264 .chips span{border:1px solid #d4dee4;background:#f4f7f9;border-radius:20px;padding:4px 9px;font-size:10px;color:#395768}
.tbx-1264 .search:is(:hover,:focus-within) .hints{max-height:80px;opacity:1;transform:none;padding-top:11px}
.tbx-1264 .search:is(:hover,:focus-within) .field{border-color:#c56f51}
@media (prefers-reduced-motion: reduce) {.tbx-1264 *, .tbx-1264 *::before, .tbx-1264 *::after { transition-duration:0.01ms !important; animation-duration:0.01ms !important; scroll-behavior:auto !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Search, Form
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーが利用できない場合があります。リンク・入力操作をホバー専用にしないでください。
Browser：Chrome・Firefox・Safari・Edgeの現行版を推奨。:has()利用素材は現行版で確認してください。
Reduced Motion：prefers-reduced-motion: reduce に対応。