8 Ways to Make the Search Field Sexy with CSS
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 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 simply tuck the field away when not in use.
Just Hover and Search
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.
Scrollers Need to Search, Too
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 in order 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.
A Screenful of Material
Google’s Material Design is being used quite a bit these days. So it’s only natural that the design language be 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.
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 simply clicks which area they want to search – easy!
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.
Transparency
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.
Multi Search
For sites that allow users to search 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.
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 whole 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.
The post 8 Ways to Make the Search Field Sexy with CSS appeared first on Speckyboy Web Design Magazine.