A Collection of 20 HTML and CSS search box code examples.

1.Search animation - Only CSS

Made with

1
2
Html
Css/SCSS

Author

1
Milan Raring

Demo


2.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.

Made with

1
2
Html
Css/SCSS

Author

1
Jon Kantner

Demo


3.SKEUOMORPHIC SEARCH INPUT

Made with

1
2
Html
Css/SCSS

Author

1
Jonas Badalic

Demo


4.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.

Made with

1
2
Html
Css/SCSS

Author

1
Liam

Demo


5.SEARCH BOX VERSION 2

After learning the cubic-bezier function on CSS transition, I tried remaking the search box that I did before.

Made with

1
2
Html
Css/SCSS

Author

1
Takane Ichinose

Demo


6.SEARCH BOX FOCUS EFFECT

Adding a thick outline on focus.

Made with

1
2
Html
Css/SCSS

Author

1
Chris Smith

Demo


7.SEARCH INPUT ANIMATION

A small little pure CSS animation of search interaction.

Made with

1
2
Html
Css/SCSS

Author

1
Aaron Iker

Demo


8.PURE CSS ANIMATED SEARCH BAR

Animated seach box using pure HTML & CSS.

Made with

1
2
Html
Css/SCSS

Author

1
Omar Sherif

Demo


9.SEARCH FORM WITH ANIMATED SEARCH BUTTON

Search form with animated search button which transforms into right arrow on hover.

Made with

1
2
Html
Css/SCSS

Author

1
Himalaya Singh

Demo


10.EXPANDABLE SEARCH BAR ANIMATION

Hover effect for search bar in HTML & CSS.

Made with

1
2
Html
Css/SCSS

Author

1
Menelaos

Demo


11.SEARCH BAR

Animated search bar.

Made with

1
2
Html
Css/SCSS

Author

1
Albert Feynman

Demo


12.SEARCH BOX

Nice search box. Click on search icon, then type your keyword.

Made with

1
2
Html
Css/SCSS

Author

1
Takane Ichinose

Demo


13.ANIMATED SEARCH INPUT

Animated (focus/transition only) search input that looks like a icon.

Made with

1
2
Html
Css/SCSS

Author

1
Lucas Henrique

Demo


14.EXPANDING INPUT

A slighty different implementation of Keyframers version.

Made with

1
2
Html
Css/SCSS

Author

1
Steve Gardner

Demo


15.INCREASING INPUT

Expanding search field with CSS.

Made with

1
2
Html
Css/SCSS

Author

1
Shaw

Demo


16.CSS EFFECT FOR SEARCH INPUT

Just a simple and a bit fancy CSS effect for input field.

Made with

1
2
Html
Css/SCSS

Author

1
Mihael Tomić

Demo


17.Search Box Practice #3

Made with

1
2
Html
Css/SCSS

Author

1
nikhil

Demo


18.Variable-width Search Box

Just a quick attempt to make a one-line search box that includes a text box and a button. The whole thing needs to fit in a fixed width and it’s for a localized project so we need:

A) the search button to grow and shrink to accommodate for localized labels (which could be any width) and…

B) the input to grow and shrink to take up the rest of the space left over.

Wound up doing it using display: table and display: table-cell. box-sizing helped along the way.

Made with

1
2
Html
Css/SCSS

Author

1
Brad Marshall

Demo


19.Flat CSS search box concept with loading animation

Made with

1
2
Html
Css/SCSS

Author

1
Ines Montani

Demo


20.Pure CSS Search Box

Made with

1
2
Html
Css/SCSS

Author

1
johndelanetaylor

Demo