検索クリア ボタン付き入力欄
これは、文字を入力すると右側に「×」クリアボタンが現れる検索入力欄です。左には虫眼鏡の SVG アイコンを置き、 input の oninput イベントで入力値の長さを判定して、文字があるときだけ is-on クラスでクリアボタンを表示します。
解説
これは、文字を入力すると右側に「×」クリアボタンが現れる検索入力欄です。左には虫眼鏡の SVG アイコンを置き、input の oninput イベントで入力値の長さを判定して、文字があるときだけ is-on クラスでクリアボタンを表示します。×をクリックすると値を空にし、ボタンを隠したうえで focus() で入力欄にカーソルを戻すので、続けて入力しやすい流れになっています。
こんなときに便利です
- サイト内検索やヘッダーの検索ボックス
- 絞り込みフィルターのキーワード入力
- 長い入力をワンタップで消したいスマホ向け UI
アイコン色は .sc-ic、フォーカス時の枠線色は input:focus の border-color で変更できます。type="search" を使っているためブラウザ標準のクリアUIと重なる場合があり、見た目を統一したいときは ::-webkit-search-cancel-button を display:none で消すと整います。クリアボタンには aria-label を付けておくと、補助技術の利用者にも役割が伝わります。
使用例・適したシーン
- お問い合わせフォーム
- ニュースレター登録
- 資料請求フォーム
- ログイン・新規登録
よくある質問
クリアボタンはいつ表示されますか？
入力欄に1文字以上入力されたタイミングで表示されます。文字をすべて消すと自動的に非表示へ戻ります。判定は JavaScript で、入力文字数が 0 より多いかどうかを見ています。
虫眼鏡アイコンは外部のアイコンフォントですか？
いいえ。インラインの SVG で描いているため、Font Awesome などの外部読み込みは不要です。色は currentColor を使っているので、文字色に合わせて変わります。