One of the elements most frequently used by websites is probably the search box. If you want to improve user experience in a simple way, and make it easy to search and find content for your users, then you have to add a search form on your website.
So, today we’re going to cover how to style a search form using the most exciting CSS3 features.
You’ve already seen before how to create a cool CSS3 search box and now you’ll see how can you create the above CSS3 search form with 3D look using CSS3 box-shadow.
Below you’ll find the HTML used for this search form. Note the HTML5-specific
While I initially wished to use the HTML5’s
type="search" for the search
input, I gave up because of cross browser inconsistency. For now, apparently you need to add some extra CSS lines to override the defaults.
Here are the minimal styles used to create this beautiful CSS3 search form:
Below you can find some screenshots with the search form. You’ll notice that it degrades really nice across older browsers. I would add that this CSS3 search form is a ready-to-use one.
Modern browsers like Chrome, Firefox, Safari, Opera, IE10:
Please note that, at this time, Opera supports the HTML5
placeholder attribute but is not styleable for now.
A good news is that Internet Explorer 10 will also support the HTML5 placeholder.
IE trident (IE6/IE7/IE8):
If you read my previous articles, then you already know that here we’re doing stuff that works (with or without fallbacks) across all browsers. Also, this example is not an exception.
Besides using this CSS3 form to create a searchbox, you could easily adapt this for a signup form or for a email subscription form.
Feel free to use this CSS3 search form in your projects and please let me know your thoughts!