Collection of hand-picked free HTML and CSS search box code examples. Update of July 2020 collection. 5 new items.
Related Articles:
Links
Made with
- HTML / CSS
About a code
Awesome Search Box
Awesome search box. Using only HTML & CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS
About a code
Search Box
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS
About a code
Search Box Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS
About a code
Search Input Caret Jump
A search input animation in which the magnifying glass handle flies off, becomes a caret, and plants itself into the field.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Search Box Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Custom Search
Custom CSS search box with shadow and smoke text.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Search Animation - Only CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
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: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Skeuomorphic Search Input
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
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: -
Made with
- HTML (Pug) / CSS (SCSS) / JS
About the code
Search Box Version 2
After learning thecubic-bezier
function on CSStransition
, I tried remaking the search box that I did before.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: no
Dependencies: -
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: -
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: -
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: -


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


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


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


Links
Made with
- HTML / CSS (SCSS)
About the code
Search Bar
Animated search bar.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


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


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


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


Links
Made with
- HTML / CSS (SCSS) / JavaScript
About the code
Increasing Input
Expanding search field with CSS.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -


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


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


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


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


Links
Made with
- HTML / CSS (SCSS)
About the code
Search Input Animation
Search input animation (pure css, without svg). Added variables for width
, 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: -


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