パーツ番号 03-16-11 ・ CSSのみ
スペル訂正提案「もしかして」表示
入力ミスに対して正しいと思われるキーワードを冒頭で提案する静止パネルです。WordPress検索窓での表記ゆれ・誤入力対策UIのデザイン参考になります。
プレビュー
ソースコード
HTML
<div class="d03-16-11-stage">
<div class="d03-16-11-bar">
<svg viewBox="0 0 20 20" width="14" height="14" fill="none" stroke="#94a3b8" stroke-width="1.8"><circle cx="8.5" cy="8.5" r="5.5"/><path d="M17 17l-4-4"/></svg>
<span class="d03-16-11-text">イアホン</span>
</div>
<div class="d03-16-11-drop">
<p class="d03-16-11-suggest">もしかして: <b>イヤホン</b> ではありませんか?</p>
<span class="d03-16-11-item">イヤホン ワイヤレス</span>
<span class="d03-16-11-item">イヤホン 有線</span>
<span class="d03-16-11-item">イヤホン 収納ケース</span>
</div>
</div>CSS
.prev.d03-16-11{padding:0;display:block}
.d03-16-11-stage{
width:100%;height:100%;min-height:260px;box-sizing:border-box;
background:#f1f5f9;padding:24px;position:relative;
}
.d03-16-11-bar{
display:flex;align-items:center;gap:9px;background:#fff;border-radius:10px;
border:1px solid #cbd5e1;padding:11px 14px;box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.d03-16-11-text{font-size:12.5px;color:#1e293b;font-weight:600}
.d03-16-11-drop{
position:absolute;left:24px;right:24px;top:66px;
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-11-suggest{
margin:2px 14px 6px;padding-bottom:8px;font-size:11.5px;color:#92400e;
background:#fffbeb;border-radius:7px;padding:8px 10px;
}
.d03-16-11-suggest b{color:#b45309}
.d03-16-11-item{padding:8px 14px;font-size:12px;color:#334155}クラス名 .d03-16-11 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。