40+ Open Source CSS Search Boxes - Free Downloads
Enjoy these open source CSS and HTML search box examples. The authors made the code public for you to view and use. These are sure to impress your users!
1. Increasing Input CSS Search Box
Author: Shaw (shshaw)
Created on: May 10, 2018
Made with: HTML, SCSS, JS
Tags: keyframers, css, animation, search, input
2. CSS Search Box With :placeholder-shown Selector
Trying out the :placeholder-shown selector to make a search form. With no JS, it validates and shows/hides the submit button.
Author: Liam (liamj)
Links: Source Code / Demo
Created on: October 11, 2019
Made with: HTML, SCSS
Tags: css, animation, form, validation, search
3. CSS Search Box
After learning the cubic bezier function on CSS transition, I tried remaking the search box that I did before.
Author: Takane Ichinose (takaneichinose)
Links: Source Code / Demo
Created on: February 18, 2019
Made with: Pug, SCSS, Babel
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: microinteractions, search, form, icon, textbox
4. CSS Custom Search Box
Author: co0kie (co0kie)
Links: Source Code / Demo
Created on: April 25, 2020
Made with: HTML, SCSS
Tags: custom search, smoke text, shadow css, css-shadow
5. Search Animation - Only CSS
Search animation
Author: Milan Raring (milanraring)
Links: Source Code / Demo
Created on: March 8, 2020
Made with: HTML, SCSS
Tags: css, cloud, search, animation, focus
6. Skeuomorphic Search Input
Author: Jonas Badalic (JonasBadalic)
Links: Source Code / Demo
Created on: December 2, 2019
Made with: HTML, SCSS
7. Pure CSS Expanding Search With Custom Properties (no Edge Support)
Author: Ana Tudor (thebabydino)
Created on: August 10, 2018
Made with: HTML, SCSS
Tags: controls, transform, clip-path, sass, css-variables
8. Animated Search Interaction
A search animation where the head of the magnifying glass becomes the field and the handle grows into a Search button. HTML5 validation of non-blank input ensures the field stays open when tabbing to the Search button.
Author: Jon Kantner (jkantner)
Links: Source Code / Demo
Created on: December 19, 2019
Made with: HTML, CSS
Tags: search, search-field, search-bar, search input
9. Search Box Focus Effect
Adding a thick outline on focus.
Author: Chris Smith (chris22smith)
Links: Source Code / Demo
Created on: February 8, 2019
Made with: HTML, SCSS
Tags: form, focus, search
10. CSS Search Input Animation
From Dribbble Shot
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo, Dribbble Shot
Created on: July 15, 2018
Made with: HTML, SCSS, JS
11. Pure CSS Animated Search Bar
Animated Seach box using pure HTML , CSS.
Author: Omar Sherif (omarsherifs)
Links: Source Code / Demo
Created on: October 30, 2018
Made with: HTML, CSS
Tags: css, animation, search, hover, gradiant
12. Search Form With Animated Search Button
Search form with animated search button which transforms into right arrow on hover (the search glass icon changes to right arrow).
Author: Himalaya Singh (himalayasingh)
Links: Source Code / Demo
Created on: September 15, 2018
Made with: HTML, CSS
Tags: search, form, search-button, animated, transform
13. Expandable Searchbar Animation
Hover searchbar to the show animation.
Author: Menelaos (menelaosly)
Links: Source Code / Demo
Created on: September 11, 2018
Made with: HTML, CSS
Tags: search, expand, hover, css
14. Red CSS Search Bar
Animated search bar
Author: Jove Angelevski (AlbertFeynman)
Links: Source Code / Demo
Created on: August 9, 2018
Made with: HTML, SCSS
Tags: ui, search, search-bar, ui-search, user-interface
15. Expanding Animated Search Box Using Jquery
Author: rajeshdn (cool_lazyboy)
Links: Source Code / Demo
Created on: December 4, 2017
Made with: HTML, CSS, JS
16. Animated Search Input
Animated (focus/transition only) search input that looks like a icon
Author: Lucas Henrique (lhenrique)
Links: Source Code / Demo
Created on: May 23, 2018
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: Babel
HTML Pre-processor: Pug
17. Expanding Input
Author: Steve Gardner (ste-vg)
Made with: HTML, SCSS, Babel
18. Simple Search Field (Pure CSS)
This is a CSS version of an interaction I saw on the Waze app. All the icons/images are made with CSS - the onlick interaction is done with the sibling selector ~
Author: Charlie Marcotte (FUGU22)
Links: Source Code / Demo
Created on: July 6, 2017
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
19. CSS Effect For Search Input
Just a simple and a bit fancy CSS effect for input field
Author: Mihael Tomić (mihaeltomic)
Links: Source Code / Demo
Created on: May 29, 2017
Made with: HTML, PostCSS
Tags: hover, css, animation
20. Animating Search Box
An animating search box made with HTML & CSS
Author: Jarno van Rhijn (jarnovanrhijn)
Links: Source Code / Demo
Created on: February 3, 2016
Made with: HTML, SCSS
Tags: css, css3, html, animation
21. CSS Search Box
It searches things, probably something similar been done before
Author: Jamie Coulter (jcoulterdesign)
Links: Source Code / Demo
Created on: January 12, 2016
Made with: Haml, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: ui, search, search-box, ux, pure-css
22. Search Input Animation
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo, Dribbble.com
Created on: November 7, 2018
Made with: HTML, SCSS
Tags: search, input, animation, motion, expand
23. Animated Search Form
Author: Christophe Béghin (CBeghin)
Links: Source Code / Demo
Created on: February 20, 2013
Made with: HTML, CSS, JS
Tags: css3-animation-search
24. Flat CSS Search Box With Font-Awesome Icon Button
Author: Shuvojit Das (ShuvojitDas)
Links: Source Code / Demo
Created on: September 18, 2016
Made with: HTML, CSS
Tags: search-box, searchbox, flat, css, button
25. Pure CSS: Search Field W/ Icon
Author: Landrik (landrik)
Links: Source Code / Demo
Created on: January 4, 2019
Made with: Haml, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
26. Search Input Icon - UI
Author: cnjs (cnjs)
Links: Source Code / Demo
Created on: June 6, 2018
Made with: HTML, SCSS
Tags: search, input, animation, ui
27. Simple CSS Search Box
Simple search bar design that uses an inline icon as the search button.
Author: Austin (AustinAuth)
Links: Source Code / Demo
Made with: HTML, SCSS
28. Search Box
Sitenize ekleyerek kullanıcı dostu olan arama kutusunu rahatlıkla kullandırabilirsiniz.
Author: Uğur Can (mavinizu)
Links: Source Code / Demo
Created on: June 20, 2020
Made with: HTML, CSS
Tags: search, box, searchbox
29. Beautiful Search Box
Author: Ergün Ateşbahar (erat)
Links: Source Code / Demo
Created on: November 14, 2019
Made with: HTML, CSS
30. Expandable Search Box
Expandable search box with auto toggle search icon to submit button feature. (Updated: Jan 9 2016)
Author: Morteza Ziyae (mort3za)
Links: Source Code / Demo
Created on: November 15, 2014
Made with: HTML, CSS, JS
Tags: html, css, search-box, search, expandable
31. Simple Search Bar
Just a simple responsive search bar.
Author: Emily Huang (huange)
Links: Source Code / Demo
Created on: May 29, 2014
Made with: HTML, CSS
Tags: simple, search, bar, search-bar
32. CSS Animated Search Box Concepts
Just a few ideas i've had on animating search boxes. All animations are triggered when the input is focused. Minimal Javascript is used to set the focus and submit the form, but no actual form is used in these examples. These are display examples only.
Author: Brandon Kennedy (brandonkennedy)
Links: Source Code / Demo
Created on: October 14, 2014
Made with: HTML, SCSS, JS
Tags: css, css-animation, search, js, 3d-css
33. Search Bar
Dribbble Rebound of Search Bar Liang Shi
Author: Cameron Baney (cameronbaney)
Links: Source Code / Demo
Created on: December 4, 2012
Made with: HTML, CSS, JS
Tags: css, ui, form, dribbble
34. Awsome Search-Box
Flixable Search-Box visit my youtube channne and don't forget to subscribe: youtube.com/DTC2channel support my work: https://www.paypal.com/paypalme/dtcHamza
Author: Hamza AL-Kotp (DTC2channel)
Links: Source Code / Demo
Created on: August 12, 2020
Made with: HTML, CSS
Tags: search-box, awsome
35. Animated Search Field
Author: htmlstrap (ui-coder)
Links: Source Code / Demo
Created on: December 23, 2019
Made with: HTML, CSS
Tags: animated, search, field, search-box
36. Search Box
Author: B E K (b_e_k)
Links: Source Code / Demo
Created on: November 7, 2019
Made with: HTML, CSS
Tags: search, search-box, box, ui
37. Animated Search Box
Animated Search Box using Html, Css and jQuery
Author: Aqib Hanief Bhat (aqib-hanief)
Links: Source Code / Demo
Created on: January 18, 2019
Made with: HTML, CSS, JS
Tags: animated, search-box, animated search box, css
38. CSS Stylish Search Box
Author: Suman Tapader (sumandevs)
Links: Source Code / Demo
Created on: March 27, 2019
Made with: HTML, CSS, JS
Tags: css, search-box, stylish, hover, jquery
39. Top Of The Page Search Box
resizing search box for adding to top right of a page
Author: Mike (GuerrillaCoder)
Links: Source Code / Demo
Created on: October 1, 2015
Made with: HTML, CSS
Tags: search-box
More Awesome Lists:
Share: