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.
The markup
Below you’ll find the HTML used for this search form. Note the HTML5-specific placeholder
andrequired
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.
<form class="form-wrapper"> <input type="text" id="search" placeholder="Search for CSS3, HTML5, jQuery ..." required> <input type="submit" value="go" id="submit"> </form>
The CSS
Here are the minimal styles used to create this beautiful CSS3 search form:
.form-wrapper { width: 450px; padding: 8px; margin: 100px auto; overflow: hidden; border-width: 1px; border-style: solid; border-color: #dedede #bababa #aaa #bababa; -moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444; -webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444; box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #f6f6f6; background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8)); background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8); background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8); background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8); background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8); background-image: linear-gradient(top, #f6f6f6, #eae8e8); } .form-wrapper #search { width: 330px; height: 20px; padding: 10px 5px; float: left; font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma'; border: 1px solid #ccc; -moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff; -webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff; box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .form-wrapper #search:focus { outline: 0; border-color: #aaa; -moz-box-shadow: 0 1px 1px #bbb inset; -webkit-box-shadow: 0 1px 1px #bbb inset; box-shadow: 0 1px 1px #bbb inset; } .form-wrapper #search::-webkit-input-placeholder { color: #999; font-weight: normal; } .form-wrapper #search:-moz-placeholder { color: #999; font-weight: normal; } .form-wrapper #search:-ms-input-placeholder { color: #999; font-weight: normal; } .form-wrapper #submit { float: right; border: 1px solid #00748f; height: 42px; width: 100px; padding: 0; cursor: pointer; font: bold 15px Arial, Helvetica; color: #fafafa; text-transform: uppercase; background-color: #0483a0; background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0)); background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0); background-image: -moz-linear-gradient(top, #31b2c3, #0483a0); background-image: -ms-linear-gradient(top, #31b2c3, #0483a0); background-image: -o-linear-gradient(top, #31b2c3, #0483a0); background-image: linear-gradient(top, #31b2c3, #0483a0); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; text-shadow: 0 1px 0 rgba(0, 0 ,0, .3); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff; } .form-wrapper #submit:hover, .form-wrapper #submit:focus { background-color: #31b2c3; background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3)); background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3); background-image: -moz-linear-gradient(top, #0483a0, #31b2c3); background-image: -ms-linear-gradient(top, #0483a0, #31b2c3); background-image: -o-linear-gradient(top, #0483a0, #31b2c3); background-image: linear-gradient(top, #0483a0, #31b2c3); } .form-wrapper #submit:active { outline: 0; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; } .form-wrapper #submit::-moz-focus-inner { border: 0; }
Browser support
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 10 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):
Conclusion
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!
Posted by: Dhiraj kumar
nice &very helpful thanks 4 sharing
You are welcome & thanks for your comment, Panki. 🙂
Very helpful, thank you.
Just one question – is there any way to change text (translate) “Please fill out this field.” which is shown after pressing GO and with input empty?
Hello, I just dropped by to look at this site. It looks really great and I enjoyed reading it, thank you for the
great writing!
Ur blog post, “Design a beautiful HTML5 & CSS3 search
form HTML, HTML5, CSS, CSS3, JQuery, Flash, Photoshop, mobile, iphone & ipad web application” was in fact very well worth writing a comment here!
Just simply needed to point out you actually did a terrific work.
Thanks a lot -Latrice
nice search form! thank so much!
Hey Huynhhieu, thanks for your comment.
clean & clear, a very easy way to implement search form….
Thanks a lot for a great tutorial…..
Keep it Up!
Hey Zeetan, thanks for your comment.
This is very interesting, You’re a very skilled blogger.
I’ve joined your rss feed and look forward to seeking more of your
great post. Also, I’ve shared your site in my social networks!
Hey Emely, thanks for your comment.