【コピペで簡単！】CSSで作るアニメーション付き検索フォーム/検索ボックス17選【サーチボックス/検索ボタン/input】

最近ではほとんどのサイトやブログに設置してある検索フォーム/検索ボックス。

主張し過ぎも微妙だけれど、目立たなさすぎると分かりにくい絶妙なアイテムですよね。

今回はシンプルだけれど、わかりやすい、使いやすいCSSアニメーション付きの検索フォーム/検索ボックスのCSSをご紹介します。

実装もコピペで簡単なのでぜひフォームを設置する際の参考にしてみてはいかがでしょうか。

CSSで作るアニメーション付き検索フォーム/検索ボックス17選

クリックで虫眼鏡アイコンが検索ボックスに変化するアニメーションCSS

See the Pen
Search box v.2 by Takane Ichinose (@takaneichinose)
on CodePen.

クリックで虫眼鏡アイコンが検索ボックスに変化するアニメーションCSS2

See the Pen
Search input animation by Aaron Iker (@aaroniker)
on CodePen.

クリックで虫眼鏡アイコンが検索ボックスに変化するアニメーションCSS3

See the Pen
Pure CSS expanding search with custom properties (no Edge support) by Ana Tudor (@thebabydino)
on CodePen.

クリックで虫眼鏡アイコンが検索ボックスに変化するアニメーションCSS4

See the Pen
Search bar by Takane Ichinose (@takaneichinose)
on CodePen.

クリックで虫眼鏡アイコンが検索ボックスに変化するアニメーションCSS5

See the Pen
Animated search input by Lucas Henrique (@lhenrique)
on CodePen.

クリックで虫眼鏡アイコンが検索ボックスに変化するアニメーションCSS6

See the Pen
Expanding Input by Steve Gardner (@ste-vg)
on CodePen.

クリックで虫眼鏡アイコンが検索ボックスに変化するアニメーションCSS7

See the Pen
@keyframers 1.5.0 | Increasing Input by Shaw (@shshaw)
on CodePen.

クリックで虫眼鏡アイコンが検索ボックスに変化するアニメーションCSS8

See the Pen
Animating search box by Jarno van Rhijn (@jarnovanrhijn)
on CodePen.

クリックで虫眼鏡アイコンが検索ボックスに変化するアニメーションCSS9

See the Pen
CSS Search Box by Jamie Coulter (@jcoulterdesign)
on CodePen.

クリックで虫眼鏡アイコンが検索ボックスに変化するアニメーションCSS10

See the Pen
Search Input animation (pure css, without svg) by Nikolay Talanov (@suez)
on CodePen.

クリックで虫眼鏡アイコンが検索ボックスに変化するアニメーションCSS11

See the Pen
Animated search Form by Christophe Béghin (@CBeghin)
on CodePen.

フォームにカーソルを合わせるとカテゴリ選択アイコンが表示されるカワイイ検索ボックスCSS

See the Pen
Simple Search Field (Pure CSS) by Charlie Marcotte (@FUGU22)
on CodePen.

フォームを選択するとページ背景色が変化するアニメーション検索ボックスCSS

See the Pen
Search Box Focus Effect by Chris Smith (@chris22smith)
on CodePen.

ホバーで虫眼鏡ボタンが検索ボックスに変化するアニメーション検索ボックスCSS

See the Pen
Pure CSS Animated Search Bar by Omar Sherif (@omarsherifs)
on CodePen.

ホバーで虫眼鏡ボタンが検索ボックスに変化するアニメーション検索ボックスCSS2

See the Pen
Expandable Searchbar Animation by Menelaos (@menelaosly)
on CodePen.

虫眼鏡アイコンにホバーすると矢印に変わる視覚的にわかりやすいアニメーション検索ボックスCSS

See the Pen
Search Form With Animated Search Button by Himalaya Singh (@himalayasingh)
on CodePen.

丸まった検索ボックスを選択すると下線のみのシンプルなフォームに変化する検索ボックスCSS

See the Pen
CSS effect for search input by Mihael Tomić (@mihaeltomic)
on CodePen.

コチラもオススメ

2019年7月16日【コピペで簡単実装】アニメーションがカッコイイ！送信ボタン用アニメーションCSS 9選【HTML/CSS/submitボタン】 2019年7月11日【コピペで簡単実装！】オシャレ＆かっこいいアニメーションCSSレンジスライダーデザイン16種【RANGE SLIDER】 2019年5月7日コピペで簡単に使える！CSSで作る動くトグルアニメーションデザイン14選【チェックボックス/ラジオボタン/スイッチ】