14 CSS Search Boxes
Collection of hand-picked free HTML and CSS search box code examples.
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