アイコン付きサーチバー

解説

アイコン付きサーチバーは、左側に虫眼鏡の SVG アイコンが入った角丸の検索入力欄です。CSS のみで仕上げており、JavaScript は使いません。アイコンは画像ではなくインライン SVG（circle と path の組み合わせ）で描いているため、拡大しても輪郭がにじまず、currentColor で文字色に追従します。display:flex でアイコンと入力欄を横並びにし、全体を border-radius:999px で完全な丸枠に整えています。

使う場面

• サイト内検索のヘッダー検索欄
• EC サイトの商品検索ボックス
• ブログ・ドキュメントの記事検索

入力欄をクリックすると :focus-within が働き、枠線色が #667eea に変わって淡い影が付くので、今どこを操作しているか分かりやすくなっています。type="search" を使っているため、ブラウザによっては入力内容を消すクリアボタンが表示されます。アイコンの色は svg の color、フォーカス時の色は枠線と影の指定で調整できます。検索結果を出すには別途検索処理の実装が必要です。

使用例・適したシーン

• お問い合わせフォーム
• ニュースレター登録
• 資料請求フォーム
• ログイン・新規登録