Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
RealcomBiz
Pin It

How to Create CSS3 Expanding Search Box

by Unknown | Sunday, November 10, 2013 | | 3 Comments

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAT2dzJxg4pXvUfo_MaUPXJm7JG0hx61KPBew3ebjmm6bb1AE4bUWmiwL2ayuBRnbAgHyDNRBtM4tf3Tfed-BSBRGKIS8tUqQWDJPaniDAI7CutjyY7dj0JV2Zu1YAuQdfLz9ORqsEi9ms/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!".

3 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.

  1. It is easy to understand that splash screen designer is important for our webpage if we want traffic over there.

    ReplyDelete
  2. Great ideas! Keep up the good work! Ive just found some useful sites that are worth checking out!
    json formatter online
    192.168 ll wiki router
    bullet force games

    ReplyDelete

Recent Posts

Let's Connect

Site Links

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