fonts awesome! v. 4.4

font-awesome (updated to Version 4.4)

by Preetha Srinivasan

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="searchdiv">
 <span id="searchspan">Content Type</span>
 <input id="searchip" placeholder="search here" type="text"/>
 <i id="searchicon"  class="fa fa-search">*</i>


</div>

CSS

#searchdiv{
  position:relative;
  width: 240px;
  height: 32px;  
  background: #99E3E3;
}

#searchspan{
    position: absolute;
  font-size: 14px;
  left: 16.07px;
  top: 7px;
}

#searchicon{
  position: absolute;
  right: 9.49%;
  top: 12.5%;
  bottom: 9.38%;
}

#searchip {
  font-size:16px;
  position: absolute;
  top:5%;
  left : 10%;
  border:none;
  background :  transparent;
}

.open{
  background: #E6F8F8 !important;
}

.searchmoveleft{
  transform: translate(-200px, 0px);
  transition: transform 1s;
}



.searchmoveright{
  transform: translate(15px, 0px);
  transition: transform 1s;
}

input:focus{
    outline: none;
}

JavaScript

$('#searchip').hide();
$('#searchicon').click(function(){
  if ($(this).hasClass('searchmoveleft')) {
  
   $('#searchicon').removeClass('searchmoveleft');
   $('#searchicon').addClass('searchmoveright');
   $('#searchip').hide();
    $('#searchspan').show();
   $('#searchdiv').removeClass('open');
  } else if($(this).hasClass('searchmoveright')){
    $('#searchicon').removeClass('searchmoveright');
    $('#searchicon').addClass('searchmoveleft');
  
    $('#searchip').hide();
  } else{
     $('#searchicon').addClass('searchmoveleft');
      $('#searchspan').hide();
     $('#searchip').show();
     $('#searchdiv').addClass('open');
    
  }
});