RealcomBiz
Pin It

How to Create CSS3 Expanding Search Box

How will you feel when you visit a site search page to search for a post or product and see the input field expand on click with a nice transition effect, cool right?



That's what I’m going to demonstrate in this tutorial. We will be coding an expanding search box with pure CSS3 transition. Whenever a user click to focus, the input field will expand, then contract when the user de-focused or do not type in anything. Like that? Let's get started.




The HTML

<form id="searchform" name="searchform" method="get" action="index.html">
  <div class="fieldcontainer">
    <input type="text" name="s" id="s" class="searchfield" placeholder="Keywords..." tabindex="1">
    <input type="submit" name="searchbutton" id="searchbutton" value="">
  </div>
</form>


The CSS

Since we have given similar naming convention to each search elements and button. You should be able to figure out which CSS class holds each search elements.

::-webkit-input-placeholder { /* WebKit browsers */
  color: #ccc;
  font-style: italic;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #ccc;
  font-style: italic;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #ccc;
  font-style: italic;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #ccc !important;
  font-style: italic;
}
#searchform {
  display: block;
  margin-bottom: 15px;
}

.fieldcontainer {
  display: block;
  position: relative;
  width: 90%;
  margin: 0 auto;
}

.searchfield {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  width: 45%;
  padding: 11px 7px;
  padding-right: 43px;
  background-color: #fff;
  font-size: 1.6em;
  color: #ccc;
  border: 1px solid #c8c8c8;
  border-bottom-color: #d2e2e7;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 0 0 6px #f0f0f0;
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 0 0 6px #f0f0f0;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 0 0 6px #f0f0f0;
  -webkit-transition: all 0.4s linear;
  -moz-transition: all 0.4s linear;
  transition: all 0.4s linear;
}

.searchfield:focus {
  width: 100%;
  color: #666;
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 0 0 6px #e0e0e0;
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 0 0 6px #e0e0e0;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 0 0 6px #e0e0e0;
}


We don't want users to write over the search icon on focus. So we have position the icon to the right with a margin 10px from the input container.
We have also set a margin of 380px, so as to make sure the search icon appears within the search box area. But the value of the positioning will depend on the width of your site content layout.

#searchbutton {
  position: absolute;
  right: 380px;
  top: 5px;
  height: 52px;
  width: 52px;
  border: 0;
  cursor: pointer;
  zoom: 1;
  filter: alpha(opacity=65);
  opacity: 0.65;
  background: transparent url(http://3.bp.blogspot.com/-hnSgETdqsEQ/Un5yBwokY-I/AAAAAAAAFEw/NmpcD4YdN44/s1600/search+icon.png) top left no-repeat;
  -webkit-transition: all 0.4s linear;
  -moz-transition: all 0.4s linear;
  transition: all 0.4s linear;
}
#searchbutton:hover, #searchbutton:focus {
    filter: alpha(opacity=90);
    opacity: 0.9;
}
.searchfield:focus + #searchbutton {
  right: 10px; /* adjust button position as the field expands */
}


With this brief idea, you should be able to include this effect into any of your design project or similar forms like contact form, subscription box and lots more. And the source of this tutorial is from Jake Rocheleau.
There is still room for more creative work with CSS3 transition effect depending on your creativity.



Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

0 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger