CSS experiments with a search form input and button. In this collection are the pens for anything related to search box, search bar, global search area that we can put to a website page. Searching Animation Inspired by Another Set of Eyes by Frank Rodriguez.*needs work in Firefox but looks quite nice in Chrome and Safari. Made by Ryan Mulligan. 24 April, 2016. Demo Download (7.7kb) Search-input With inset Shadow Made by Håvard Brynjulfsen. April 24, 2016. Demo Download (3.4kb) Animated Search Form Made by Kyle. April 22, 2016 Demo Download (5kb) Search Input Context Animation CSS icons Context animation Telegram App-like search loading effect Made by Riccardo Zanutta. April 19, 2016. Demo Download (6.7kb) Prefixbox Instant Search Box Design originally forked from sartios’s Pen Search Box: Expand on Hover.Made by Sverrir Sigmundarson. April 12, 2016. Demo Download (4.7kb) Simple Mobile Search Input This is an example of search input, that could be put in a mobile template for an e-commerce or wheather or much more. Made by Tommaso Poletti. April 12, 2016. Demo Download (3.3kb) Animated Search Input Made by Francesco Michelini. April 01, 2016. Demo Download (8.5kb) Search Menu Animation Made by ChenCody. March 16, 2016. Demo Download (1.8kb) Diagonal Menu With Search A small menu demo. Made by Jermaine. March 11, 2016. Demo Download (4.3kb) Search Box Search concept with options. Made by Fabio Ottaviani. March 10, 2016. Demo Download (5.9kb) Search Form Concep A little search concept. Made by Rune Sejer Hoffmann. February 07, 2016. Demo Download (4.9kb) Animating Search Box An animating search box made with HTML & CSS. Made by Jarno van Rhijn. February 03, 2016. Demo Download (3.9kb) Search Green Box An interesting effect of search action. Made by Konstantin Solodovnik. February 05, 2016. Demo Download (2.7kb) CSS Expanding Search Box An expanding search box/form powered purely by CSS. Made by WebDevStudios. February 02, 2016. Demo Download (6kb) Search Animation Made by Dmitriy. January 27, 2016. Demo Download (7kb) Flat CSS Search Box Concept With Loading Animation Concept for a simple dynamic search box with a loading animation that’s displayed in the search field. Made by Ines Montani. January 24, 2016. Demo Download (4kb) Search Form Animation Small Angular animation (could easily be vanilla js) to show user that a search result is pending. This is good UI to let the user know the server is working. Uses CSS flexbox. Made by Brendan Quinn. January 21, 2016. Demo Download (6.5kb) CSS Search Box It searches things, probably something similar been done before. Made by Jamie Coulter. January 12, 2016. Demo Download (4.1kb) Compact Search Input Input[type=“search”] with transition from magnifier icon to field.Inspiration: Sandeep Virk’s dribble https://dribbble.com/shots/1992789-Search. Made by Uli Schumacher. January 12, 2016. Demo Download (3.1kb) Search Box Made by Marco Livi. January 07, 2016. Demo Download (3.4kb) Search Transformation Interactive prototype of search form transformation.Originally made by Alex Pronsky (https://dribbble.com/aPronsky).Dribble item: https://dribbble.com/shots/2308755-Search-Transform-Principle-Freebie. Made by Lucas Bourdallé. October 22, 2015. Demo Download (2.3kb) CSS Animated And Responsive Search Button Concept A pure css search button that expends to a text input and a search button on click.It uses css transitions for animation and media queries to be full width under 480px. Made by napssy. October 21, 2015. Demo Download (4.1kb) Expand Search Button Button expands when hovering and shows search field. Made by Caroline Vermeir. October 06, 2015. Demo Download (1.9kb) Minimalistic Search Lightly designed, expanding/collapsing search field. Clicking on “Search” expands into an input field, and clicking on the “X” clears the field and collapses it back to its initial state.Made by Ryan Altvater. August 05, 2015. Demo Download (5kb) Search Input Focus Animation A simple animation for the focus event on a search input. Made by Nicolás J. Engler. July 26, 2015. Demo Download (7.1kb) Search Input With Animation Made by Arlina Design. April 12, 2015. Demo Downlaod (2kb)
Source: 27 Search Boxes With HTML and CSS – CSS Paradise