Post thumbnail: 18 CSS Search Boxes

18 CSS Search Boxes

Collection of hand-picked free HTML and CSS search box code examples. Update of October 2018 collection. 4 new items.


Author

  • Takane Ichinose

Links

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About the code

Search Box Version 2

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

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Chris Smith

Links

Made with

  • HTML / CSS (SCSS)

About the code

Search Box Focus Effect

Adding a thick outline on focus.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Aaron Iker

Links

Made with

  • HTML / CSS (SCSS)

About the code

Search Input Animation

A small little pure CSS animation of search interaction.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Omar Sherif

Links

Made with

  • HTML / CSS

About the code

Pure CSS Animated Search Bar

Animated seach box using pure HTML & CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Search Form With Animated Search Button Search Form With Animated Search Button - GIF Demo

Author

  • Himalaya Singh

Links

Made with

  • HTML / CSS

About the code

Search Form With Animated Search Button

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Expandable Search Bar Animation Expandable Search Bar Animation - GIF Demo

Author

  • Menelaos

Links

Made with

  • HTML / CSS

About the code

Expandable Search Bar Animation

Hover effect for search bar in HTML & CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Pure CSS Expanding Search Pure CSS Expanding Search - GIF Demo

Author

  • Ana Tudor

Links

Made with

  • HTML / CSS (SCSS)

About the code

Pure CSS Expanding Search

Pure CSS expanding search with custom properties.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Search Bar Search Bar - GIF Demo

Author

  • Albert Feynman

Links

Made with

  • HTML / CSS (SCSS)

About the code

Search Bar

Animated search bar.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Search Box Search Box - GIF Demo

Author

  • Takane Ichinose

Links

Made with

  • HTML / CSS

About the code

Search Box

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Animated Search Input Animated Search Input - GIF Demo

Author

  • Lucas Henrique

Links

Made with

  • HTML (Pug) / CSS (Sass)

About the code

Animated Search Input

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Expanding Input Expanding Input - GIF Demo

Author

  • Steve Gardner

Links

Made with

  • HTML / CSS (SCSS) / JavaScript (Babel)

About the code

Expanding Input

A slighty different implementation of Keyframers version.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Increasing Input Increasing Input - GIF Demo

Author

  • Shaw

Links

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

Increasing Input

Expanding search field with CSS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Simple On-click Search Field Interaction Simple On-click Search Field Interaction - GIF Demo

Author

  • Charlie Marcotte

Links

Made with

  • HTML (Pug) / CSS (Sass)

About the code

Simple On-click Search Field Interaction

All the icons/images are made with CSS - the onlick interaction is done with the sibling selector ~.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: CSS Effect for Search Input CSS Effect for Search Input - GIF Demo

Author

  • Mihael Tomić

Links

Made with

  • HTML / CSS (PostCSS)

About the code

CSS Effect for Search Input

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Animating Search Box Animating Search Box - GIF Demo

Author

  • Jarno van Rhijn

Links

Made with

  • HTML / CSS (SCSS)

About the code

Animating Search Box

An animating search box made with HTML & CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: CSS Search Box CSS Search Box - GIF Demo

Author

  • Jamie Coulter

Links

Made with

  • HTML (Haml) / CSS (SCSS)

About the code

CSS Search Box

Pretty search box in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: ionicons.css

Demo image: Search Input Animation Search Input Animation - GIF Demo

Author

  • Nikolay Talanov

Links

Made with

  • HTML / CSS (SCSS)

About the code

Search Input Animation

Search input animation (pure css, without svg). Added variables for width, height and border-width, so now you can easily change overall dimensions of this search input. This demo have only one problem - no input autofocus after opening click.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Animated Search Form Animated Search Form - GIF Demo

Author

  • Christophe Béghin

Links

Made with

  • HTML / CSS

About the code

Animated Search Form

Very interesting solution for search form.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

back to top