Elegant and Engaging Web Forms Part 1: Search Bars

Alt Text


A search box is an essential part for most sites to allow the user to fully explore and experience their content. Search forms should be noticeable and easy to find so the user always has the choice to look for more once they are done with their current page. With the rise of CSS3 and javascript libraries like jQuery, search forms are becoming more advanced with more features.

I will also gather resources to teach how to create search bars and give them advanced functionalities.

Here are some examples of elegant search bars that look great, but also work well. Along with these examples, I will also provide resources to learn how to implement certain techniques you may want to have in your search forms.

Other Parts

Read Elegant and Engaging Web Forms Part 2: Login and Registration Forms



With the recent redesign of WebDesignerWall came a new search bar. It is a simple rounded search bar that lengthens in a nice animation when clicked on.


The main search form is over an image slider so that the search bar is both in the center of attention while still previewing new images.


On the RealMacSoftware blog there is a simple embossed search bar. When the search bar is clicked, there is a nice glow effect that surrounds the search bar.


This search bar in the fixed menu, has an instant search. The results slide down under the search bar.


This beautiful search bar has a nice font with an embossed background on the wood header.


Their search bar glows brighter when you hover over the form.


This search bar gets a nice black border around the form and the replaceable text fades before being replaced. The search text also has a text shadow.


There are two tabs to search for with long embossed search bars.


This search form is the main element of the webpage with big replaceable text while keeping the first couple letters to remind you what to search for. Besides the gorgeous search button, there is also a suggested search feature that has thumbnails of musical artists.


GrooveShark has multiple themes that spice up the search design. You can support your favorite artists or just use a fun design as a theme.


There are 3 different tabs for different categories. The advanced tab expands the search bar and adds advanced options.


The image thumbnails are filtered instantly when something is searched for.


This custom search bar has a nice chalk and handwritten feel, matching the design of the website.

Nike Skateboarding

This large gray search form has big bold text and shows instant search results.


This large search bar has instant search results as well a nice gradient background.


This silver rounded search bar has a nice contrast to the dark colors of the website that makes it easy to find and also beautiful to look at.


Styling Your Search Form with CSS ~ SohtanakaView Demo

How to Use the jQuery UI Autocomplete Widget ~ NetTutsView Demo

How-To Create Your Own Instant Search ~ Woorkup

Grooveshark Search with CSS3 ~ DesignInDevelopmentView Demo (Includes replaceable text tutorial)

Creating A Rocking CSS3 Search Field ~ HongKiatView Demo