Instagram web/desktop inspired search box

Question

If you visit someone's instagram page on desktop/pc, the search bar, when clicked, floats left and then text can be entered to search. When there is no text in the search field, the search icon and the "search" placeholder go back to the original center position.

I assume javacript/jquery is used to this and I want to implement it as well, but I don't know any script that will be able to accomplish this. Below is my HTML and CSS code, any help will be greatly appreciated!

HTML

<div class="box">
    <div class="container-1">
    <span class="icon"><i class="fa fa-search"></i></span>
    <input type="search" id="search" placeholder="Search" />
    </div>
    </div>

CSS

.box{
  margin: 3px auto;

  width: 200px;
  height: 20px;
  padding-right: 10px;
}

.container-1{
  width: 200px;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;

}

.container-1 input#search{
  width: 200px;
  height: 30px;
  background: #FFFFFF;
  border: 1px solid #C5C4C4;
  font-size: 10pt;
  text-align: center;
  color: #000000;

  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
   border-radius: 25px;


  -webkit-transition: background .55s ease;
  -moz-transition: background .55s ease;
  -ms-transition: background .55s ease;
  -o-transition: background .55s ease;
   transition: background .55s ease;
}


.container-1 input#search::-webkit-input-placeholder {
   color: #A8A7A7;
   letter-spacing: 1px;
   font-size: 12px;
}

.container-1 input#search:-moz-placeholder { /* Firefox 18- */
   color: #A8A7A7; 
   letter-spacing: 1px;
   font-size: 12px; 
}

.container-1 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #A8A7A7;
   letter-spacing: 1px;
   font-size: 12px;  
}


.container-1 input#search:-ms-input-placeholder {  
   color: #A8A7A7; 
   letter-spacing: 1px;
   font-size: 12px; 
}

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* Firefox 18- */
input:focus::-moz-placeholder { color:transparent; } /* Firefox 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* oldIE ;) */


.container-1 .icon{
  position: absolute;
  padding-top: 8px;
  padding-left: 50px;
  font-size: 12px;
  z-index: 1;
  color: #A8A7A7;

}



.container-1 input#search:hover, .container-1 input#search:focus, .container-1 input#search:active{
    outline:none;
    background: #ffffff;

  }



  input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
  display: none; 
}


  @media all and (max-width : 370px) {


.box{
  margin: 15px auto;

  width: 200px;
  height: 20px;
  padding-right: 10px;
}
  }

Answer 1

I created a simple fiddle to give you a sample look how it can be done. For now i don't know how to make placeholder to be centered so it's with fixed padding.

input {
  width: 200px;
  padding-left: 80px;
  box-sizing: border-box;
  
  background: url(https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_search_48px-128.png);
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: 62px 0;
}
input:focus {
  padding-left: 16px;
  background-position: 0;
}

<input type="text" placeholder="Search" />

P.S. You can easily animate this effect by providing transition, for example:

transition: all 0.05s ease-in-out;

It should look like that:

input {
  width: 200px;
  padding-left: 80px;
  box-sizing: border-box;
  
  background: url(https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_search_48px-128.png);
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: 62px 0;
  
  transition: all 0.05s ease-in-out;
}
input:focus {
  padding-left: 16px;
  background-position: 0;
}

<input type="text" placeholder="Search" />

---

(search icon from www.iconfinder.com)

Answer 2

I implemented a lame simulation of what you asked. Hope it helps. Instagram is using an Html block similar to this one:

$("#LabelContainer").click(function() {
  $("#Search-Input").show();
  $("#Search-Input").focus();
  $("#LabelContainer").hide();
});

$('body').click(function(evt){    
  if (evt.target.id === "LabelContainer" ||
     evt.target.id === "Search-Input")
      return;
  var labelText = $("#Search-Input").val() === '' ? 'Search' : $("#Search-Input").val();
  $("#LabelContainer").text(labelText);
  $("#LabelContainer").show();
  $("#Search-Input").hide();
  
});

body{
   width 100%;
   height: 100%;
   min-height: 200px;
}

.MainContainer {        
    margin: 0 auto;
    height: 30px;
    width: 200px
}

#Search-Input {    
    display: none;
    border: solid 1px #dbdbdb;
    border-radius: 3px;
    color: #262626;
    font-size: 14px;
    outline: none;
    padding: 3px 10px 3px 26px;
    z-index: 2;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
}

#LabelContainer {
    border: solid 1px #dbdbdb;
    border-radius: 3px;
    color: #262626;        
    font-size: 18px;
    font-weight: bold;
    outline: none;
    padding: 3px 0;
    z-index: 2;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    text-align: center;
}

.LabelText {    

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="MainContainer"> 
        <input id="Search-Input" type="text" placeholder="Search..." value="">
        <div id="LabelContainer">Search</div>
</div>