【8つの方法で紹介】CSSで検索フィールドを機能的かつオシャレに！

検索フィールドは、どんなWebサイトにもある実用的なパーツです。しかし、だからといってデザインの工夫の余地がないし、しなくてもよいというわけではありません。事実はまったく反対です。
検索は、ユーザーが探しているものを簡単に見つけ出すことができ、とくにコンテンツの詰まったサイトでは非常に役立ちます。したがって、検索フィールドが魅力的かつ目立っていて使いやすいものとなるように時間をかける価値は十分にあります。
このことを念頭に置いて、本記事では、控えめな検索フィールドを一段高級なものにしてくれるスニペットのコレクションをご紹介します。シンプルなCSSの美的側面での機能拡張からJavaScriptのUIまで、幅広く探してあります。

１．モーフィングアイコン

モーフィングアニメーションは常に良い選択肢です。ここでは、クリックすると完全な検索バーに変形する、遍在的な拡大鏡アイコンが表示されます。 “×” をクリックすると元に戻ります。このようにして使用しないときにはフィールドをしまっておくことができるので、小さなスクリーン向けには素晴らしいソリューションとなります。

２．ジャスト・ホバー＆サーチ

この例は、上のものと似た機能を提供していますが、重要な違いがあります。それは、検索フィ

リンク元