50+ CSS Search Boxes

A user-friendly application is created using multiple user-interface modules; one such module is a search box, or search bar. In this post, we are showcasing visually stunning 50+ HTML and CSS search box code examples that we have gathered from CodePen, GitHub, and other reliable platforms.

A search bar allows users to input a search term or query, which retrieves relevant content or information within a fraction of a second. From simple search bars to animated search bars and extending search boxes to pure CSS search boxes, we have a wide array of search boxes for web designers and developers.

Each search box code snippet comes with unique and stylish options that can enhance the aesthetics as well as the functionality of your web applications. So, let’s explore our top CSS search box collection and make your site visitors lives hassle-free.

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