デザイン

CSSとJSで検索フォームをカスタマイズするコード 5+

search-form-customize

今回は、CSSとJSでWebサイトの検索フォームを少しカスマイズするコード6種類のご紹介です。
今回は、検索フォームのデザインなどではないのですが、検索ボタンをクリックすると検索テキストエリアがニュッるっと表示されるようなちょっとした小技などを利用した検索フォームのカスタマイズです。
サイトの検索フォームを見ると意外とありきたりなのが多いので、今回ご紹介するコードなどを利用して、ちょっとした小技を取り入れた検索フォームにしてみてはいかがでしょうか?(当サイトの検索フォームもありきたりですが・・・www)

Super Cool Search Input Bar Using CSS3 and JS

search-form-customize1

こちらの検索フォームは、アイコンをクリックすると検索テキストエリアが右から左へ表示されもう一度クリックするとテキストエリアが非表示されます。
コードや利用方法は下記リンク先をご参考下さい。

コード

Pulsating CSS3 Input Search Box

search-form-customize2

こちらは、CSS3のみで作成された検索フォームで、テキストエリアにフォーカスするとテキストエリアがネオン管のように強く光ったり、弱く光ったりと面白いエフェクトをします。

コード

Search Bar Animation

search-form-customize3

こちらも最初の検索フォームと似ており、検索アイコンをクリックするとテキストエリアが伸び縮みします。

コード

jQuery Smooth Animated Search Field Freebie

search-form-customize

こちらは、フォーカスすると検索テキストエリアが幅を広げて、文字を入力すると、検索ボタンが表示されるようになっています。
個人的には、一番お気に入りかなと思います。

コード

EXPANDING SEARCH BAR DECONSTRUCTED

ExpandingSearchBar

検索アイコンをクリックすると右からニュッると検索テキストエリアが表示される検索フォームです。

コード

Animated Search Form

search-form-customize4

こちらも、検索アイコンをクリックすると右からニュッると検索テキストエリアが表示される検索フォームとなっております。

コード

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS cool-drop

クールでカッコイイドロップダウンメニューをCSSで実装する

NEXT font-awesome

商用利用無料のWebアイコンフォント【Font Awesome】使い方