60+ CSS 搜索框代码 codepen 示例

css 搜索框| 2024-04-11

探查 CSS 搜索框的编写的各种方法，探索各种代码示例，并在自己的项目中定制它们。

1. Pure CSS Morphing-Like Search Icon by Fabien Butazzi

See the Pen <a href="https://codepen.io/fabienb/pen/xGMzOd" target="_blank" rel="noopener">Pure CSS Morphing-Like Search Icon</a> byfabienb(<a href="https://codepen.io/fabienb" target="_blank" rel="noopener">@fabienb</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Fabien Butazzi
Links: Source Code / Demo
Made with: HTML CSS js

2. Awsome Search-Box by Hamza AL-Kotp

See the Pen <a href="https://codepen.io/DTC2channel/pen/MWyaPdy" target="_blank" rel="noopener">Awsome Search-Box</a> byDTC2channel(<a href="https://codepen.io/DTC2channel" target="_blank" rel="noopener">@DTC2channel</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Hamza AL-Kotp
Links: Source Code / Demo
Made with: HTML CSS js

3. CSS Effect For Search Input by Mihael Tomić

See the Pen <a href="https://codepen.io/mihaeltomic/pen/vmwMdm" target="_blank" rel="noopener">CSS Effect For Search Input</a> bymihaeltomic(<a href="https://codepen.io/mihaeltomic" target="_blank" rel="noopener">@mihaeltomic</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Mihael Tomić
Links: Source Code / Demo
Made with: HTML CSS js

4. Search bar by Ashvin Motye

See the Pen <a href="https://codepen.io/ashvinmotye/pen/OdBYxP" target="_blank" rel="noopener">Search bar</a> byashvinmotye(<a href="https://codepen.io/ashvinmotye" target="_blank" rel="noopener">@ashvinmotye</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Ashvin Motye
Links: Source Code / Demo
Made with: HTML CSS js

5. Animating Search Box by Jarno van Rhijn

See the Pen <a href="https://codepen.io/jarnovanrhijn/pen/obPLOY" target="_blank" rel="noopener">Animating Search Box</a> byjarnovanrhijn(<a href="https://codepen.io/jarnovanrhijn" target="_blank" rel="noopener">@jarnovanrhijn</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Jarno van Rhijn
Links: Source Code / Demo
Made with: HTML CSS js

6. Skeuomorphic Search Input by Jonas Badalic

See the Pen <a href="https://codepen.io/JonasBadalic/pen/zYxYjBL" target="_blank" rel="noopener">Skeuomorphic Search Input</a> byJonasBadalic(<a href="https://codepen.io/JonasBadalic" target="_blank" rel="noopener">@JonasBadalic</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Jonas Badalic
Links: Source Code / Demo
Made with: HTML CSS js

7. CSS Search Box by Takane Ichinose

See the Pen <a href="https://codepen.io/takaneichinose/pen/ErGwPZ" target="_blank" rel="noopener">CSS Search Box</a> bytakaneichinose(<a href="https://codepen.io/takaneichinose" target="_blank" rel="noopener">@takaneichinose</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Takane Ichinose
Links: Source Code / Demo
Made with: HTML CSS js

8. AngularJS – Data Table by Tiffany Rayside

See the Pen <a href="https://codepen.io/tmrDevelops/pen/BjREzb" target="_blank" rel="noopener">AngularJS – Data Table</a> bytmrDevelops(<a href="https://codepen.io/tmrDevelops" target="_blank" rel="noopener">@tmrDevelops</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Tiffany Rayside
Links: Source Code / Demo
Made with: HTML CSS js

9. Expanding Input by Steve Gardner

See the Pen <a href="https://codepen.io/ste-vg/pen/QrrrOz" target="_blank" rel="noopener">Expanding Input</a> byste-vg(<a href="https://codepen.io/ste-vg" target="_blank" rel="noopener">@ste-vg</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Steve Gardner
Links: Source Code / Demo
Made with: HTML CSS js

10. Red CSS Search Bar by Jove Angelevski

See the Pen <a href="https://codepen.io/AlbertFeynman/pen/BPvzWZ" target="_blank" rel="noopener">Red CSS Search Bar</a> byAlbertFeynman(<a href="https://codepen.io/AlbertFeynman" target="_blank" rel="noopener">@AlbertFeynman</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Jove Angelevski
Links: Source Code / Demo
Made with: HTML CSS js

11. Expandable Searchbar Animation by Menelaos

See the Pen <a href="https://codepen.io/menelaosly/pen/rZddyb" target="_blank" rel="noopener">Expandable Searchbar Animation</a> bymenelaosly(<a href="https://codepen.io/menelaosly" target="_blank" rel="noopener">@menelaosly</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Menelaos
Links: Source Code / Demo
Made with: HTML CSS js

12. Animated Search Form by Christophe Béghin

See the Pen <a href="https://codepen.io/CBeghin/pen/HeuiF" target="_blank" rel="noopener">Animated Search Form</a> byCBeghin(<a href="https://codepen.io/CBeghin" target="_blank" rel="noopener">@CBeghin</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Christophe Béghin
Links: Source Code / Demo
Made with: HTML CSS js

13. Search box animation by Milan Milošev

See the Pen <a href="https://codepen.io/MilanMilosev/pen/JdgRpB" target="_blank" rel="noopener">Search box animation</a> byMilanMilosev(<a href="https://codepen.io/MilanMilosev" target="_blank" rel="noopener">@MilanMilosev</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Milan Milošev
Links: Source Code / Demo
Made with: HTML CSS js

14. CSS Stylish Search Box by Suman Tapader

See the Pen <a href="https://codepen.io/sumandevs/pen/rRExaZ" target="_blank" rel="noopener">CSS Stylish Search Box</a> bysumandevs(<a href="https://codepen.io/sumandevs" target="_blank" rel="noopener">@sumandevs</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Suman Tapader
Links: Source Code / Demo
Made with: HTML CSS js

15. Minimalist Search by Alex Crocker

See the Pen <a href="https://codepen.io/croc/pen/WxxNPx" target="_blank" rel="noopener">Minimalist Search</a> bycroc(<a href="https://codepen.io/croc" target="_blank" rel="noopener">@croc</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Alex Crocker
Links: Source Code / Demo
Made with: HTML CSS js

16. Pure CSS: Search Field W/ Icon by Landrik

See the Pen <a href="https://codepen.io/landrik/pen/gZvVMy" target="_blank" rel="noopener">Pure CSS: Search Field W/ Icon</a> bylandrik(<a href="https://codepen.io/landrik" target="_blank" rel="noopener">@landrik</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Landrik
Links: Source Code / Demo
Made with: HTML CSS js

17. CSS Animated Search Box Concepts by Brandon Kennedy

See the Pen <a href="https://codepen.io/brandonkennedy/pen/yGjsi" target="_blank" rel="noopener">CSS Animated Search Box Concepts</a> bybrandonkennedy(<a href="https://codepen.io/brandonkennedy" target="_blank" rel="noopener">@brandonkennedy</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Brandon Kennedy
Links: Source Code / Demo
Made with: HTML CSS js

18. Flat CSS search box concept with loading animation by Ines Montani

See the Pen <a href="https://codepen.io/ines/pen/MKQqer" target="_blank" rel="noopener">Flat CSS search box concept with loading animation</a> byines(<a href="https://codepen.io/ines" target="_blank" rel="noopener">@ines</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Ines Montani
Links: Source Code / Demo
Made with: HTML CSS js

19. Simple CSS Search Box by Austin

See the Pen <a href="https://codepen.io/AustinAuth/pen/iksxo" target="_blank" rel="noopener">Simple CSS Search Box</a> byAustinAuth(<a href="https://codepen.io/AustinAuth" target="_blank" rel="noopener">@AustinAuth</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Austin
Links: Source Code / Demo
Made with: HTML CSS js

20. CSS Search Box by Jamie Coulter

See the Pen <a href="https://codepen.io/jcoulterdesign/pen/pgwxJR" target="_blank" rel="noopener">CSS Search Box</a> byjcoulterdesign(<a href="https://codepen.io/jcoulterdesign" target="_blank" rel="noopener">@jcoulterdesign</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Jamie Coulter
Links: Source Code / Demo
Made with: HTML CSS js

21. Search Input Caret Jump by Jon Kantner

See the Pen <a href="https://codepen.io/jkantner/pen/eYJboxN" target="_blank" rel="noopener">Search Input Caret Jump</a> byjkantner(<a href="https://codepen.io/jkantner" target="_blank" rel="noopener">@jkantner</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Jon Kantner
Links: Source Code / Demo
Made with: HTML CSS js

22. Search Box by Short Code

See the Pen <a href="https://codepen.io/ShortCode/pen/jOrBeOw" target="_blank" rel="noopener">Search Box</a> byShortCode(<a href="https://codepen.io/ShortCode" target="_blank" rel="noopener">@ShortCode</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Short Code
Links: Source Code / Demo
Made with: HTML CSS js

23. Foresight Search Engine – Landing Page Design Mockup by Cole Waldrip

See the Pen <a href="https://codepen.io/colewaldrip/pen/dZwpLW" target="_blank" rel="noopener">Foresight Search Engine – Landing Page Design Mockup</a> bycolewaldrip(<a href="https://codepen.io/colewaldrip" target="_blank" rel="noopener">@colewaldrip</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Cole Waldrip
Links: Source Code / Demo
Made with: HTML CSS js

24. Search Animation – Only CSS by Milan Raring

See the Pen <a href="https://codepen.io/milanraring/pen/qBdVwOP" target="_blank" rel="noopener">Search Animation – Only CSS</a> bymilanraring(<a href="https://codepen.io/milanraring" target="_blank" rel="noopener">@milanraring</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Milan Raring
Links: Source Code / Demo
Made with: HTML CSS js

25. Search Box by Uğur Can

See the Pen <a href="https://codepen.io/mavinizu/pen/ExPZBQQ" target="_blank" rel="noopener">Search Box</a> bymavinizu(<a href="https://codepen.io/mavinizu" target="_blank" rel="noopener">@mavinizu</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Uğur Can
Links: Source Code / Demo
Made with: HTML CSS js

26. Search Form by Andrias

See the Pen <a href="https://codepen.io/poporetto/pen/vGjbYJ" target="_blank" rel="noopener">Search Form</a> bypoporetto(<a href="https://codepen.io/poporetto" target="_blank" rel="noopener">@poporetto</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Andrias
Links: Source Code / Demo
Made with: HTML CSS js

27. Neumorphism Bar by Tran Dinh Trung

See the Pen <a href="https://codepen.io/tdtrung17693/pen/BaozOzQ" target="_blank" rel="noopener">Neumorphism Bar</a> bytdtrung17693(<a href="https://codepen.io/tdtrung17693" target="_blank" rel="noopener">@tdtrung17693</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Tran Dinh Trung
Links: Source Code / Demo
Made with: HTML CSS js

28. CSS Search Box With :placeholder-shown Selector by Liam

See the Pen <a href="https://codepen.io/liamj/pen/vYYLGZj" target="_blank" rel="noopener">CSS Search Box With :placeholder-shown Selector</a> byliamj(<a href="https://codepen.io/liamj" target="_blank" rel="noopener">@liamj</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Liam
Links: Source Code / Demo
Made with: HTML CSS js

29. Bulma AirBNB Inspired Bar by Paul Miller

See the Pen <a href="https://codepen.io/paulkmiller/pen/jywwqa" target="_blank" rel="noopener">Bulma AirBNB Inspired Bar</a> bypaulkmiller(<a href="https://codepen.io/paulkmiller" target="_blank" rel="noopener">@paulkmiller</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Paul Miller
Links: Source Code / Demo
Made with: HTML CSS js

30. CSS only slide out bar by arthurra

See the Pen <a href="https://codepen.io/arthurra/pen/KhCyk" target="_blank" rel="noopener">CSS only slide out bar</a> byarthurra(<a href="https://codepen.io/arthurra" target="_blank" rel="noopener">@arthurra</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: arthurra
Links: Source Code / Demo
Made with: HTML CSS js

31. Increasing Input CSS Search Box by Shaw

See the Pen <a href="https://codepen.io/shshaw/pen/odqGVR" target="_blank" rel="noopener">Increasing Input CSS Search Box</a> byshshaw(<a href="https://codepen.io/shshaw" target="_blank" rel="noopener">@shshaw</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Shaw
Links: Source Code / Demo
Made with: HTML CSS js

32. Search Input Animation by Aaron Iker

See the Pen <a href="https://codepen.io/suez/pen/MYxGab" target="_blank" rel="noopener">Search Input Animation</a> bysuez(<a href="https://codepen.io/suez" target="_blank" rel="noopener">@suez</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Aaron Iker
Links: Source Code / Demo
Made with: HTML CSS js

33. CSS Custom Search Box by co0kie

See the Pen <a href="https://codepen.io/co0kie/pen/YzyZBqb" target="_blank" rel="noopener">CSS Custom Search Box</a> byco0kie(<a href="https://codepen.io/co0kie" target="_blank" rel="noopener">@co0kie</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: co0kie
Links: Source Code / Demo
Made with: HTML CSS js

34. Extending Search by Daniel Riemer

See the Pen <a href="https://codepen.io/zitrusfrisch/pen/rNLPMr" target="_blank" rel="noopener">Extending Search</a> byzitrusfrisch(<a href="https://codepen.io/zitrusfrisch" target="_blank" rel="noopener">@zitrusfrisch</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Daniel Riemer
Links: Source Code / Demo
Made with: HTML CSS js

35. Inspiration Search Bar by Martin Pitt

See the Pen <a href="https://codepen.io/nexii/pen/OJOdVey" target="_blank" rel="noopener">Inspiration Search Bar</a> bynexii(<a href="https://codepen.io/nexii" target="_blank" rel="noopener">@nexii</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Martin Pitt
Links: Source Code / Demo
Made with: HTML CSS js

36. Expanding Animated Search Box Using Jquery by rajeshdn

See the Pen <a href="https://codepen.io/takaneichinose/pen/gKVXXL" target="_blank" rel="noopener">Expanding Animated Search Box Using Jquery</a> bytakaneichinose(<a href="https://codepen.io/takaneichinose" target="_blank" rel="noopener">@takaneichinose</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: rajeshdn
Links: Source Code / Demo
Made with: HTML CSS js

37. Expandable Search Box by Morteza Ziyae

See the Pen <a href="https://codepen.io/mort3za/pen/dPyjMv" target="_blank" rel="noopener">Expandable Search Box</a> bymort3za(<a href="https://codepen.io/mort3za" target="_blank" rel="noopener">@mort3za</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Morteza Ziyae
Links: Source Code / Demo
Made with: HTML CSS js

38. Animated Search Box Interaction by abhishek dana

See the Pen <a href="https://codepen.io/danaabhi7119/pen/WNedaMG" target="_blank" rel="noopener">Animated Search Box Interaction</a> bydanaabhi7119(<a href="https://codepen.io/danaabhi7119" target="_blank" rel="noopener">@danaabhi7119</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: abhishek dana
Links: Source Code / Demo
Made with: HTML CSS js

39. Simple Search Field (Pure CSS) by Charlie Marcotte

See the Pen <a href="https://codepen.io/FUGU22/pen/RgBydE" target="_blank" rel="noopener">Simple Search Field (Pure CSS)</a> byFUGU22(<a href="https://codepen.io/FUGU22" target="_blank" rel="noopener">@FUGU22</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Charlie Marcotte
Links: Source Code / Demo
Made with: HTML CSS js

40. Simple Search Bar by Emily Huang

See the Pen <a href="https://codepen.io/huange/pen/rbqsD" target="_blank" rel="noopener">Simple Search Bar</a> byhuange(<a href="https://codepen.io/huange" target="_blank" rel="noopener">@huange</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Emily Huang
Links: Source Code / Demo
Made with: HTML CSS js

41. Search Box by B E K

See the Pen <a href="https://codepen.io/b_e_k/pen/PooeQmw" target="_blank" rel="noopener">Search Box</a> byb_e_k(<a href="https://codepen.io/b_e_k" target="_blank" rel="noopener">@b_e_k</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: B E K
Links: Source Code / Demo
Made with: HTML CSS

42. Animated Search Interaction by Jon Kantner

See the Pen <a href="https://codepen.io/jkantner/pen/eYmvvqQ" target="_blank" rel="noopener">Animated Search Interaction</a> byjkantner(<a href="https://codepen.io/jkantner" target="_blank" rel="noopener">@jkantner</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Jon Kantner
Links: Source Code / Demo
Made with: HTML CSS

43. Animated Search Input by Lucas Henrique

See the Pen <a href="https://codepen.io/lhenrique/pen/JvqGjj" target="_blank" rel="noopener">Animated Search Input</a> bylhenrique(<a href="https://codepen.io/lhenrique" target="_blank" rel="noopener">@lhenrique</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Lucas Henrique
Links: Source Code / Demo
Made with: HTML CSS

44. search box by Paul Miller

See the Pen <a href="https://codepen.io/lucagez/pen/yRGPaM" target="_blank" rel="noopener">search box</a> bylucagez(<a href="https://codepen.io/lucagez" target="_blank" rel="noopener">@lucagez</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Paul Miller
Links: Source Code / Demo
Made with: HTML CSS

45. Search Form With Animated Search Button by Himalaya Singh

See the Pen <a href="https://codepen.io/himalayasingh/pen/dqjLgO" target="_blank" rel="noopener">Search Form With Animated Search Button</a> byhimalayasingh(<a href="https://codepen.io/himalayasingh" target="_blank" rel="noopener">@himalayasingh</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Himalaya Singh
Links: Source Code / Demo
Made with: HTML CSS

46. Search Bar by Cameron Baney

See the Pen <a href="https://codepen.io/cameronbaney/pen/EazjJ" target="_blank" rel="noopener">Search Bar</a> bycameronbaney(<a href="https://codepen.io/cameronbaney" target="_blank" rel="noopener">@cameronbaney</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Cameron Baney
Links: Source Code / Demo
Made with: HTML CSS

47. Awesome Search Box by Ahmad Emran

See the Pen <a href="https://codepen.io/ahmadbassamemran/pen/rNjMXqg" target="_blank" rel="noopener">Awesome Search Box</a> byahmadbassamemran(<a href="https://codepen.io/ahmadbassamemran" target="_blank" rel="noopener">@ahmadbassamemran</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Ahmad Emran
Links: Source Code / Demo
Made with: HTML CSS

48. HTML UTF-8 Symbols with Decimal code by Vineeth.TR

See the Pen <a href="https://codepen.io/vineethtrv/pen/qdKXeB" target="_blank" rel="noopener">HTML UTF-8 Symbols with Decimal code</a> byvineethtrv(<a href="https://codepen.io/vineethtrv" target="_blank" rel="noopener">@vineethtrv</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Vineeth.TR
Links: Source Code / Demo
Made with: HTML CSS

49. Wikipedia Viewer by U-ways

See the Pen <a href="https://codepen.io/u-ways/pen/VjqoEJ" target="_blank" rel="noopener">Wikipedia Viewer</a> byu-ways(<a href="https://codepen.io/u-ways" target="_blank" rel="noopener">@u-ways</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: U-ways
Links: Source Code / Demo
Made with: HTML CSS

50. Animated Search Field by htmlstrap

See the Pen <a href="https://codepen.io/ui-coder/pen/WNbjKEm" target="_blank" rel="noopener">Animated Search Field</a> byui-coder(<a href="https://codepen.io/ui-coder" target="_blank" rel="noopener">@ui-coder</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: htmlstrap
Links: Source Code / Demo
Made with: HTML CSS

51. Animated Search Box by Aqib Hanief Bhat

See the Pen <a href="https://codepen.io/aqib-hanief/pen/dwBQdy" target="_blank" rel="noopener">Animated Search Box</a> byaqib-hanief(<a href="https://codepen.io/aqib-hanief" target="_blank" rel="noopener">@aqib-hanief</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Aqib Hanief Bhat
Links: Source Code / Demo
Made with: HTML CSS

52. CSS Search Input Animation by Aaron Iker

See the Pen <a href="https://codepen.io/aaroniker/pen/XyXzYp" target="_blank" rel="noopener">CSS Search Input Animation</a> byaaroniker(<a href="https://codepen.io/aaroniker" target="_blank" rel="noopener">@aaroniker</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Aaron Iker
Links: Source Code / Demo
Made with: HTML CSS

53. Search Box Animation by Yuhomyan

See the Pen <a href="https://codepen.io/yuhomyan/pen/XWdYJdv" target="_blank" rel="noopener">Search Box Animation</a> byyuhomyan(<a href="https://codepen.io/yuhomyan" target="_blank" rel="noopener">@yuhomyan</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Yuhomyan
Links: Source Code / Demo
Made with: HTML CSS

54. DailyUI 022 by Tran Dinh Trung

See the Pen <a href="https://codepen.io/cobra_winfrey/pen/rrWQEp" target="_blank" rel="noopener">DailyUI 022</a> bycobra_winfrey(<a href="https://codepen.io/cobra_winfrey" target="_blank" rel="noopener">@cobra_winfrey</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Tran Dinh Trung
Links: Source Code / Demo
Made with: HTML CSS

55. Search Box Animation by Coding Script

See the Pen <a href="https://codepen.io/dream_boy999/pen/YzwdRNK" target="_blank" rel="noopener">Search Box Animation</a> bydream_boy999(<a href="https://codepen.io/dream_boy999" target="_blank" rel="noopener">@dream_boy999</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Coding Script
Links: Source Code / Demo
Made with: HTML CSS

56. Pure CSS Expanding Search With Custom Properties (no Edge Support) by Ana Tudor

See the Pen <a href="https://codepen.io/thebabydino/pen/PBXRRm" target="_blank" rel="noopener">Pure CSS Expanding Search With Custom Properties (no Edge Support)</a> bythebabydino(<a href="https://codepen.io/thebabydino" target="_blank" rel="noopener">@thebabydino</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Ana Tudor
Links: Source Code / Demo
Made with: HTML CSS

57. Pure CSS Animated Search Bar by Omar Sherif

See the Pen <a href="https://codepen.io/omarsherifs/pen/KGLYYW" target="_blank" rel="noopener">Pure CSS Animated Search Bar</a> byomarsherifs(<a href="https://codepen.io/omarsherifs" target="_blank" rel="noopener">@omarsherifs</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Omar Sherif
Links: Source Code / Demo
Made with: HTML CSS

58. Search Box Focus Effect by Chris Smith

See the Pen <a href="https://codepen.io/chris22smith/pen/zeRopN" target="_blank" rel="noopener">Search Box Focus Effect</a> bychris22smith(<a href="https://codepen.io/chris22smith" target="_blank" rel="noopener">@chris22smith</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Chris Smith
Links: Source Code / Demo
Made with: HTML CSS

59. Top Of The Page Search Box by Mike

See the Pen <a href="https://codepen.io/GuerrillaCoder/pen/bVqbVN" target="_blank" rel="noopener">Top Of The Page Search Box</a> byGuerrillaCoder(<a href="https://codepen.io/GuerrillaCoder" target="_blank" rel="noopener">@GuerrillaCoder</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Mike
Links: Source Code / Demo
Made with: HTML CSS

60. Flat CSS Search Box With Font-Awesome Icon Button by Shuvojit Das

See the Pen <a href="https://codepen.io/ShuvojitDas/pen/kkkWaW" target="_blank" rel="noopener">Flat CSS Search Box With Font-Awesome Icon Button</a> byShuvojitDas(<a href="https://codepen.io/ShuvojitDas" target="_blank" rel="noopener">@ShuvojitDas</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Shuvojit Das
Links: Source Code / Demo
Made with: HTML CSS

61. Search Input Icon – UI by cnjs

See the Pen <a href="https://codepen.io/cnjs/pen/vrXyGZ" target="_blank" rel="noopener">Search Input Icon – UI</a> bycnjs(<a href="https://codepen.io/cnjs" target="_blank" rel="noopener">@cnjs</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: cnjs
Links: Source Code / Demo
Made with: HTML CSS

62. Nav-bar with search by Decatron

See the Pen <a href="https://codepen.io/megatroncoder/pen/EEeOaB" target="_blank" rel="noopener">Nav-bar with search</a> bymegatroncoder(<a href="https://codepen.io/megatroncoder" target="_blank" rel="noopener">@megatroncoder</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Decatron
Links: Source Code / Demo
Made with: HTML CSS

63. Beautiful Search Box by Ergün Ateşbahar

See the Pen <a href="https://codepen.io/erat/pen/NWWOyVQ" target="_blank" rel="noopener">Beautiful Search Box</a> byerat(<a href="https://codepen.io/erat" target="_blank" rel="noopener">@erat</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Ergün Ateşbahar
Links: Source Code / Demo
Made with: HTML CSS

64. Search Input by wontem

See the Pen <a href="https://codepen.io/wontem/pen/XJLPyN" target="_blank" rel="noopener">Search Input</a> bywontem(<a href="https://codepen.io/wontem" target="_blank" rel="noopener">@wontem</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: wontem
Links: Source Code / Demo
Made with: HTML CSS

65. Google Metro Flatten by nau.val();

See the Pen <a href="https://codepen.io/pedox/pen/AZXNXJ" target="_blank" rel="noopener">Google Metro Flatten</a> bypedox(<a href="https://codepen.io/pedox" target="_blank" rel="noopener">@pedox</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: nau.val();
Links: Source Code / Demo
Made with: HTML CSS

66. Daily UI #008 | 404 Page by Julie Park

See the Pen <a href="https://codepen.io/juliepark/pen/erOoeZ" target="_blank" rel="noopener">Daily UI #008 | 404 Page</a> byjuliepark(<a href="https://codepen.io/juliepark" target="_blank" rel="noopener">@juliepark</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Author: Julie Park
Links: Source Code / Demo
Made with: HTML CSS