アイコンとクリアボタンを内蔵した検索入力欄。ブラウザごとに見た目が違う標準の×ボタンを消して、自前のクリアに統一します。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
アイコンとクリアボタンは position: absolute で入力欄に重ね、その分の余白をinputのpaddingで確保します。type="search" の標準クリアボタンはブラウザごとに見た目が異なるため、::-webkit-search-cancel-button で消して自前のボタンに統一。クリア後に input.focus() でフォーカスを戻すのが、続けて入力し直せる小さな気配りです。
form要素にrole="search"を付けると、支援技術のランドマークとして検索欄に直接ジャンプできるようになります。
クリアボタン付きの検索ボックスを作ってください。アイコンとクリアボタンをposition: absoluteで内蔵し、標準の×は::-webkit-search-cancel-buttonで無効化、クリア後はフォーカスを入力欄に戻してください。