フォーム入力
検索バー
先頭に虫めがねアイコンを置いた検索入力。文字を入れるとクリア（×）ボタンが現れ、押すと入力が消えてフォーカスが戻る。
プレビュー
入力
操作実際に入力して試せます。
実装メモ
アイコンは 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>