Get 10 Free 
The search field is very much a utilitarian part of your average website. But that doesn’t mean it should be ignored – quite the contrary.
Search provides users with a simple way to find what they’re looking for and can be invaluable on content-heavy sites. Therefore, it’s worth taking some extra time to ensure that your search area is attractive, noticeable, and easy to use.
With that in mind, here are a collection of snippets that take the humble search field up a notch. They range from simple CSS aesthetic enhancements all the way to JS-infused UIs that help make for a more immersive experience.
Morphing Search Bar Icon
Morphing animation is always a treat. Here we have the ubiquitous magnifying glass icon that, when clicked, morphs into a full search bar.
Clicking on the “X” sends the whole thing back to square one. This could be a nice solution for smaller screens in that you can tuck the field away when not in use.
See the Pen Search bar animation by Milan Milošev
CSS Search Field Hover & Search Animation
This example offers similar functionality to the one above, but with an important difference. Instead of having to click to reveal the search field, a user just needs to hover over the icon.
This may be a relatively small thing, but it could provide a boost when it comes to usability. Again, a potentially solid choice for cramped spaces.
See the Pen CSS Search Field Animation by Sebastian Popp
Scrolling Search Bar
On mobile devices, users may be in for a whole lot of scrolling. But if they can’t find what they’re looking for, it often means that they’ll have to go all the way back to the site’s header to perform a search.
Here we have a “sticky” search bar that will attach itself to the top of the screen as you scroll down the page. This handy feature can make life that much easier for users.
See the Pen Search Box in Content Moves to Fixed Header by Chris Coyier
Material Fullscreen Search Transition
Google’s Material Design is being used quite a bit these days. So it’s only natural that the design language is applied to search as well. It’s also nice that, once clicked, this search field takes over the entire screen.
This allows users to focus solely on their search and, with a little work, designers could potentially add other related information to the display.
See the Pen Material Fullscreen Search Transition by Luca Dimola
Simple Custom Search
There may be times when users want to search only specific areas of your site. While a custom search isn’t exactly a new concept, it hasn’t always been that visually appealing of a process. That’s what makes this custom search field demo so slick.
It sports a series of icons, each representing a different area where a search can be performed (plus handy tooltips). The user clicks which area they want to search – easy!
See the Pen DailyUI #022 – Search by Fabio Ottaviani
Context Animation
Providing visual context during a search helps to assure users that they are on the right path. This snippet uses AJAX to both change the background color and add textual information as the user performs a search.
See the Pen Search input context animation by Riccardo Zanutta
Transparent Search Box
How do you create a search area that both stands out while not sticking out like a sore thumb? Using some transparency is one way to do it. Here we have a translucent search field that sits on top of a full-screen image.
The white border is strong, however, and that makes for a nice visual effect while not overtaking the page.
See the Pen A cool little search box by Jon Welsh
Multi Search with Combo Box
For sites that allow users to search for more than one set of data, this example can be quite useful. It harnesses jQuery to enable the user to switch between different search fields, thus placing all search functionality in a single place.
See the Pen multi search with combo box by John McGarrah
The End Result
Search fields can play a vital role in keeping users on your website. And the examples above are proof that you can provide some useful enhancements without a lot of extra effort.
So, if you’ve neglected to pay much attention when it comes to the look and functionality of your site’s search feature, this will give you a great place to start.
Top