Collection of hand-picked free HTML and CSS search box code examples. Update of July 2019 collection. 5 new items.

  1. Bootstrap Search Boxes
  2. jQuery Search Boxes

Creator

  • co0kie

Programming language

  • HTML / CSS (SCSS)

Information a code

Custom Search

Custom CSS search box with shadow and smoke text.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Milan Raring

Programming language

  • HTML / CSS (SCSS)

Information a code

Search Animation – Only CSS

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Jon Kantner

Programming language

  • HTML / CSS

Information a code

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.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Jonas Badalic

Programming language

  • HTML / CSS (SCSS)

Information a code

Skeuomorphic Search Input

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Liam

Programming language

  • HTML / CSS (SCSS)

Information a code

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Takane Ichinose

Programming language

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

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

Browser Support: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Chris Smith

Programming language

  • HTML / CSS (SCSS)

Information the code

Search Box Focus Effect

Adding a thick outline on focus.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Aaron Iker

Programming language

  • HTML / CSS (SCSS)

Information the code

Search Input Animation

A small little pure CSS animation of search interaction.

Browser Support: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Omar Sherif

Programming language

  • HTML / CSS

Information the code

Pure CSS Animated Search Bar

Animated seach box using pure HTML & CSS.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

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

Creator

  • Himalaya Singh

Programming language

  • HTML / CSS

Information the code

Search Form With Animated Search Button

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

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

Creator

  • Menelaos

Programming language

  • HTML / CSS

Information the code

Expandable Search Bar Animation

Hover effect for search bar in HTML & CSS.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

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

Creator

  • Ana Tudor

Programming language

  • HTML / CSS (SCSS)

Information the code

Pure CSS Expanding Search

Pure CSS expanding search with custom properties.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Demo image: Search Bar Search Bar - GIF Demo

Creator

  • Albert Feynman

Programming language

  • HTML / CSS (SCSS)

Information the code

Search Bar

Animated search bar.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Search Box Search Box - GIF Demo

Creator

  • Takane Ichinose

Programming language

  • HTML / CSS

Information the code

Search Box

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

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

Creator

  • Lucas Henrique

Programming language

  • HTML (Pug) / CSS (Sass)

Information the code

Animated Search Input

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Expanding Input Expanding Input - GIF Demo

Creator

  • Steve Gardner

Programming language

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

Information the code

Expanding Input

A slighty different implementation of Keyframers version.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Demo image: Increasing Input Increasing Input - GIF Demo

Creator

  • Shaw

Programming language

  • HTML / CSS (SCSS) / JavaScript

Information the code

Increasing Input

Expanding search field with CSS.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

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

Creator

  • Charlie Marcotte

Programming language

  • HTML (Pug) / CSS (Sass)

Information 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 ~.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

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

Creator

  • Mihael Tomić

Programming language

  • HTML / CSS (PostCSS)

Information the code

CSS Effect for Search Input

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

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

Creator

  • Jarno van Rhijn

Programming language

  • HTML / CSS (SCSS)

Information the code

Animating Search Box

An animating search box made with HTML & CSS

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

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

Creator

  • Jamie Coulter

Programming language

  • HTML (Haml) / CSS (SCSS)

Information the code

CSS Search Box

Pretty search box in HTML and CSS.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: ionicons.css

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

Creator

  • Nikolay Talanov

Programming language

  • HTML / CSS (SCSS)

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

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

Creator

  • Christophe Béghin

Programming language

  • HTML / CSS

Information the code

Animated Search Form

Very interesting solution for search form.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css