23 CSS Search Boxes

About a code

Custom Search

Custom CSS search box with shadow and smoke text.

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

Responsive: yes

Dependencies: -

About a code

Search Animation - Only CSS

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

Responsive: no

Dependencies: -

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

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

Responsive: yes

Dependencies: -

About a code

Skeuomorphic Search Input

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

Responsive: no

Dependencies: -

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

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

Responsive: yes

Dependencies: -

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

About the code

Search Box Focus Effect

Adding a thick outline on focus.

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

Responsive: yes

Dependencies: -

About the code

Search Input Animation

A small little pure CSS animation of search interaction.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

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

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

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

About the code

Pure CSS Expanding Search

Pure CSS expanding search with custom properties.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

About the code

Search Bar

Animated search bar.

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

Dependencies: -

About the code

Search Box

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

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

Dependencies: -

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

About the code

Expanding Input

A slighty different implementation of Keyframers version.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

About the code

Increasing Input

Expanding search field with CSS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

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

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

About the code

Animating Search Box

An animating search box made with HTML & CSS

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

Dependencies: -

About the code

CSS Search Box

Pretty search box in HTML and CSS.

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

Dependencies: ionicons.css

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

About the code

Animated Search Form

Very interesting solution for search form.

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

Dependencies: font-awesome.css