検索バー
先頭に虫めがねアイコンを置いた検索入力。文字を入れるとクリア（×）ボタンが現れ、押すと入力が消えてフォーカスが戻る。
プレビュー
入力
操作実際に入力して試せます。
仕様書
- 向く場面
- サイト・アプリのヘッダーに置くキーワード検索
- 入力があるときだけクリアを出したい欄
- ブラウザ既定の × を自前のボタンに統一したい入力
- 避ける場面
- 候補や履歴を出す検索（サジェスト系を使う）
- 複数条件のフィルタ
- 構成要素
- 虫めがねアイコン
- 入力欄
- クリアボタン
- ヒント
- 持っている状態
- 通常
- ホバー
- フォーカス
- 押下中
- キーボード
Tab で入力欄→（値があれば）クリアボタン。クリアは Enter／Space で消して入力欄へ戻る。Enter で送信
- 支援技術
form は role=search、視覚的に隠した label で名前を付ける。クリアは aria-label「検索をクリア」、アイコンは aria-hidden
- 動き
枠色・リング 180ms、クリアの背景 150ms。reduced-motion で無効
デザインの要点
- クリアボタンは値があるときだけ出す。空欄に × があると、何を消すのか分からず押される
- クリア後はフォーカスを入力欄へ戻す。消してすぐ打ち直すのが自然な流れで、Tab で戻らせない
- ブラウザ既定の × は appearance:none で消し、自前の1つに統一する。2つ並ぶと片方が効かないように見える
- 左右の padding は 40px 前後を確保して、アイコンとボタンが文字に重ならないようにする
実装メモ
アイコンは position:absolute で重ね、入力の左右に padding を確保して文字と被らないようにしています。クリアボタンは値があるときだけ表示し、押したら入力を空にしてフォーカスを input に戻します。type="search" のブラウザ既定の×は appearance:none で消し、自前のボタンに統一しています。
コード（コピーして使えます）
<form class="sb-form" role="search" novalidate>
<label class="sb-visually-hidden" for="sb-input">検索</label>
<div class="sb-field">
<svg class="sb-icon" width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
<circle cx="8" cy="8" r="5.5" stroke="currentColor" stroke-width="1.6"/>
<line x1="12.2" y1="12.2" x2="16" y2="16" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
</svg>
<input
id="sb-input"
class="sb-input"
type="search"
placeholder="キーワードで検索"
autocomplete="off"
/>
<button class="sb-clear" id="sb-clear" type="button" aria-label="検索をクリア" hidden>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
<line x1="3.5" y1="3.5" x2="10.5" y2="10.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
<line x1="10.5" y1="3.5" x2="3.5" y2="10.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
</svg>
</button>
</div>
<p class="sb-hint" id="sb-hint">入力するとクリアボタンが現れます</p>
</form>