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

1.Search animation - Only CSS

Made with

Html
Css/SCSS

Author

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

Html
Css/SCSS

Author

Jon Kantner

Demo

3.SKEUOMORPHIC SEARCH INPUT

Made with

Html
Css/SCSS

Author

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

Html
Css/SCSS

Author

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

Html
Css/SCSS

Author

Takane Ichinose

Demo

6.SEARCH BOX FOCUS EFFECT

Adding a thick outline on focus.

Made with

Html
Css/SCSS

Author

Chris Smith

Demo

7.SEARCH INPUT ANIMATION

A small little pure CSS animation of search interaction.

Made with

Html
Css/SCSS

Author

Aaron Iker

Demo

8.PURE CSS ANIMATED SEARCH BAR

Animated seach box using pure HTML & CSS.

Made with

Html
Css/SCSS

Author

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

Html
Css/SCSS

Author

Himalaya Singh

Demo

10.EXPANDABLE SEARCH BAR ANIMATION

Hover effect for search bar in HTML & CSS.

Made with

Html
Css/SCSS

Author

Menelaos

Demo

11.SEARCH BAR

Animated search bar.

Made with

Html
Css/SCSS

Author

Albert Feynman

Demo

12.SEARCH BOX

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

Made with

Html
Css/SCSS

Author

Takane Ichinose

Demo

13.ANIMATED SEARCH INPUT

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

Made with

Html
Css/SCSS

Author

Lucas Henrique

Demo

14.EXPANDING INPUT

A slighty different implementation of Keyframers version.

Made with

Html
Css/SCSS

Author

Steve Gardner

Demo

15.INCREASING INPUT

Expanding search field with CSS.

Made with

Html
Css/SCSS

Author

Shaw

Demo

16.CSS EFFECT FOR SEARCH INPUT

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

Made with

Html
Css/SCSS

Author

Mihael Tomić

Demo

17.Search Box Practice #3

Made with

Html
Css/SCSS

Author

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

Html
Css/SCSS

Author

Brad Marshall

Demo

19.Flat CSS search box concept with loading animation

Made with

Html
Css/SCSS

Author

Ines Montani

Demo

20.Pure CSS Search Box

Made with

Html
Css/SCSS

Author

johndelanetaylor

Demo