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 placeholder and required attributes.
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.