50+ CSS Search Boxes

Curated collection of free 50+ HTML and CSS search box code examples. Each item is free and carefully chosen from CodePen, GitHub, and other reliable platforms.

1. Search Box Practice #3

See the Pen <a href="https://codepen.io/nikhil/pen/DEJReP"> Search Box Practice #3</a> by nikhil (<a href="https://codepen.io/nikhil">@nikhil</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: nikhil
Source: Code / Demo
Created on: JANUARY 17, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

2. Search Box Focus Effect

See the Pen <a href="https://codepen.io/chris22smith/pen/zeRopN"> Search Box Focus Effect</a> by Chris Smith (<a href="https://codepen.io/chris22smith">@chris22smith</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chris Smith
Source: Code / Demo
Created on: FEBRUARY 8, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

3. CSS Search Box

See the Pen <a href="https://codepen.io/jcoulterdesign/pen/pgwxJR"> CSS Search Box</a> by Jamie Coulter (<a href="https://codepen.io/jcoulterdesign">@jcoulterdesign</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jamie Coulter
Source: Code / Demo
Created on: JANUARY 12, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)

4. Extending Search

See the Pen <a href="https://codepen.io/zitrusfrisch/pen/rNLPMr"> Extending Search</a> by Daniel Riemer (<a href="https://codepen.io/zitrusfrisch">@zitrusfrisch</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Daniel Riemer
Source: Code / Demo
Created on: APRIL 28, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS

5. Make Search Box Animation

See the Pen <a href="https://codepen.io/dream_boy999/pen/YzwdRNK"> #Make Search Box Animation </a> by Coding Script (<a href="https://codepen.io/dream_boy999">@dream_boy999</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Coding Script
Source: Code / Demo
Created on: JULY 21, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

6. Expandable Searchbar Animation

See the Pen <a href="https://codepen.io/menelaosly/pen/rZddyb"> Expandable Searchbar Animation</a> by Menelaos (<a href="https://codepen.io/menelaosly">@menelaosly</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Menelaos
Source: Code / Demo
Created on: SEPTEMBER 12, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

7. Search bar

See the Pen <a href="https://codepen.io/takaneichinose/pen/gKVXXL"> Search bar</a> by Takane Ichinose (<a href="https://codepen.io/takaneichinose">@takaneichinose</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Takane Ichinose
Source: Code / Demo
Created on: JULY 8, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

8. CSS Animated Search Box Concepts

See the Pen <a href="https://codepen.io/brandonkennedy/pen/wvZWgg"> CSS Animated Search Box Concepts</a> by Brandon Kennedy (<a href="https://codepen.io/brandonkennedy">@brandonkennedy</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Brandon Kennedy
Source: Code / Demo
Created on: OCTOBER 14, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

9. Simple Search Field (Pure CSS)

See the Pen <a href="https://codepen.io/FUGU22/pen/RgBydE"> Simple Search Field (Pure CSS)</a> by Charlie Marcotte (<a href="https://codepen.io/FUGU22">@FUGU22</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Charlie Marcotte
Source: Code / Demo
Created on: JULY 6, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Sass)

10. Animated search field

See the Pen <a href="https://codepen.io/ui-coder/pen/WNbjKEm"> Animated search field</a> by htmlstrap (<a href="https://codepen.io/ui-coder">@ui-coder</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: htmlstrap
Source: Code / Demo
Created on: DECEMBER 23, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

11. Pure CSS Search Box

See the Pen <a href="https://codepen.io/smotchysmooly/pen/DgNWWL"> Pure CSS Search Box</a> by smotchysmooly (<a href="https://codepen.io/smotchysmooly">@smotchysmooly</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: smotchysmooly
Source: Code / Demo
Created on: FEBRUARY 4, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

12. Simple Search Bar

See the Pen <a href="https://codepen.io/AustinAuth/pen/xxmbZX"> Simple Search Bar</a> by Austin (<a href="https://codepen.io/AustinAuth">@AustinAuth</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Austin
Source: Code / Demo
Created on: SEPTEMBER 24, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

13. Expandable Search Box

See the Pen <a href="https://codepen.io/mort3za/pen/dPyjMv"> Expandable Search Box</a> by Morteza (<a href="https://codepen.io/mort3za">@mort3za</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Morteza
Source: Code / Demo
Created on: NOVEMBER 16, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

14. Search box v.2 (CSS Only)

See the Pen <a href="https://codepen.io/takaneichinose/pen/ErGwPZ"> Search box v.2 (CSS Only)</a> by Takane Ichinose (<a href="https://codepen.io/takaneichinose">@takaneichinose</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Takane Ichinose
Source: Code / Demo
Created on: FEBRUARY 18, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

15. Animated input search

See the Pen <a href="https://codepen.io/co0kie/pen/YzyZBqb"> Animated input search</a> by co0kie (<a href="https://codepen.io/co0kie">@co0kie</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: co0kie
Source: Code / Demo
Created on: APRIL 25, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

16. Animated Search Box

See the Pen <a href="https://codepen.io/aqib-hanief/pen/dwBQdy"> Animated Search Box</a> by Aqib Hanief Bhat (<a href="https://codepen.io/aqib-hanief">@aqib-hanief</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Aqib Hanief Bhat
Source: Code / Demo
Created on: JANUARY 18, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

17. Search Box

See the Pen <a href="https://codepen.io/mavinizu/pen/ExPZBQQ"> Search Box</a> by Uğur Can (<a href="https://codepen.io/mavinizu">@mavinizu</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Uğur Can
Source: Code / Demo
Created on: JUNE 20, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

18. Pure CSS Animated Search Bar

See the Pen <a href="https://codepen.io/omarsherifs/pen/KGLYYW"> Pure CSS Animated Search Bar</a> by Omar Sherif (<a href="https://codepen.io/omarsherifs">@omarsherifs</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Omar Sherif
Source: Code / Demo
Created on: OCTOBER 30, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

19. Google Metro Flatten

See the Pen <a href="https://codepen.io/pedox/pen/AZXNXJ"> Google Metro Flatten</a> by nau.val(); (<a href="https://codepen.io/pedox">@pedox</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: nau.val();
Source: Code / Demo
Created on: AUGUST 7, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(Sass)

20. Increasing Input

See the Pen <a href="https://codepen.io/shshaw/pen/odqGVR"> @keyframers 1.5.0 | Increasing Input</a> by Shaw (<a href="https://codepen.io/shshaw">@shshaw</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Shaw
Source: Code / Demo
Created on: MAY 10, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

21. Search Bar

See the Pen <a href="https://codepen.io/AlbertFeynman/pen/BPvzWZ"> UI #2 – Search Bar</a> by Jove Angelevski (<a href="https://codepen.io/AlbertFeynman">@AlbertFeynman</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jove Angelevski
Source: Code / Demo
Created on: AUGUST 9, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

22. Expanding search bar with jQuery

See the Pen <a href="https://codepen.io/nikhil/pen/kKLvXm"> Expanding search bar with jQuery</a> by nikhil (<a href="https://codepen.io/nikhil">@nikhil</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: nikhil
Source: Code / Demo
Created on: JANUARY 24, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

23. Search input

See the Pen <a href="https://codepen.io/wontem/pen/XJLPyN"> Search input</a> by wontem (<a href="https://codepen.io/wontem">@wontem</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: wontem
Source: Code / Demo
Created on: APRIL 12, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Sass)

24. Skeuomorphic search input

See the Pen <a href="https://codepen.io/JonasBadalic/pen/zYxYjBL"> Skeuomorphic search input</a> by Jonas Badalic (<a href="https://codepen.io/JonasBadalic">@JonasBadalic</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jonas Badalic
Source: Code / Demo
Created on: DECEMBER 3, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

25. Search box

See the Pen <a href="https://codepen.io/bekoff2002/pen/wvvjyEo"> Search box</a> by B E K (<a href="https://codepen.io/bekoff2002">@bekoff2002</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: B E K
Source: Code / Demo
Created on: NOVEMBER 7, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

26. Expanding Input

See the Pen <a href="https://codepen.io/ste-vg/pen/QrrrOz"> Expanding Input</a> by Steve Gardner (<a href="https://codepen.io/ste-vg">@ste-vg</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Steve Gardner
Source: Code / Demo
Created on: MAY 12, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

27. Pure CSS Search Box

See the Pen <a href="https://codepen.io/focuspubli/pen/AapxpP"> Pure CSS Search Box</a> by Focus Publications (<a href="https://codepen.io/focuspubli">@focuspubli</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Focus Publications
Source: Code / Demo
Created on: MAY 23, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

28. Animating search box

See the Pen <a href="https://codepen.io/jarnovanrhijn/pen/obPLOY"> Animating search box</a> by Jarno van Rhijn (<a href="https://codepen.io/jarnovanrhijn">@jarnovanrhijn</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jarno van Rhijn
Source: Code / Demo
Created on: FEBRUARY 3, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

29. Pure CSS expanding search with custom properties (no pre-Chromium Edge support)

See the Pen <a href="https://codepen.io/thebabydino/pen/PBXRRm"> Pure CSS expanding search with custom properties (no pre-Chromium Edge support)</a> by Ana Tudor (<a href="https://codepen.io/thebabydino">@thebabydino</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ana Tudor
Source: Code / Demo
Created on: AUGUST 10, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

30. placeholder-shown selector

See the Pen <a href="https://codepen.io/liamj/pen/vYYLGZj"> :placeholder-shown selector</a> by Liam (<a href="https://codepen.io/liamj">@liamj</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Liam
Source: Code / Demo
Created on: OCTOBER 12, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

31. Simple Search Bar

See the Pen <a href="https://codepen.io/huange/pen/bGqMqM"> Simple Search Bar</a> by Emily Huang (<a href="https://codepen.io/huange">@huange</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Emily Huang
Source: Code / Demo
Created on: MAY 30, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

32. Animated search input

See the Pen <a href="https://codepen.io/lhenrique/pen/JvqGjj"> Animated search input</a> by Lucas Henrique (<a href="https://codepen.io/lhenrique">@lhenrique</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Lucas Henrique
Source: Code / Demo
Created on: MAY 24, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Sass)

33. Top of the page search box

Author: Mike
Source: Code / Demo
Created on: OCTOBER 2, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

34. Search Form

Author: Andrias
Source: Code / Demo
Created on: APRIL 18, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less)

35. Pure CSS morphing-like search icon

Author: Fabien Butazzi
Source: Code / Demo
Created on: AUGUST 6, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less)

36. Expanding text box/button

Author: Sam Daitzman
Source: Code / Demo
Created on: FEBRUARY 21, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

37. Search Box Animation

Author: Yuhomyan
Source: Code / Demo
Created on: SEPTEMBER 13, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

38. Flat CSS search box concept with loading animation

Author: Ines Montani
Source: Code / Demo
Created on: JANUARY 24, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Sass), JavaScript

39. Search Input Caret Jump

Author: Jon Kantner
Source: Code / Demo
Created on: JULY 21, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

40. Awsome Search-Box

Author: Hamza Elkotp
Source: Code / Demo
Created on: AUGUST 12, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

41. Search Form With Animated Search Button

Author: Himalaya Singh
Source: Code / Demo
Created on: SEPTEMBER 15, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

42. CSS effect for search input

Author: Mihael Tomić
Source: Code / Demo
Created on: MAY 29, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(PostCSS)

43. Job Search Platform UI

Author: Aysenur Turk
Source: Code / Demo
Created on: SEPTEMBER 23, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSSCSS(SCSS), JavaScript

44. UI #2 – Search Bar

Author: Jove Angelevski
Source: Code / Demo
Created on: AUGUST 9, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

45. Search input animation

Author: Aaron Iker
Source: Code / Demo
Created on: NOVEMBER 8, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

46. Search animation – Only CSS

Author: Milan Raring
Source: Code / Demo
Created on: MARCH 8, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

47. Beautiful Search Box

Author: Ergün Ateşbahar
Source: Code / Demo
Created on: NOVEMBER 14, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

48. CSS Stylish Search Box

Author: Suman Tapader
Source: Code / Demo
Created on: MARCH 27, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

49. Search Bar

Author: Cameron Baney
Source: Code / Demo
Created on: DECEMBER 5, 2012
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

50. Search Input Icon – UI

Author: cnjs
Source: Code / Demo
Created on: JUNE 7, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

51. Animated Search Interaction

Author: Jon Kantner
Source: Code / Demo
Created on: DECEMBER 20, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS