<div class="search-form">
  <span class="slens"> <i class="fa fa-search"></i> </span>
  <input id="s" type="text" />
  <span class="sclose"><i class="fa fa-times"></i></span>  
</div>

body{
    background:#444;
}
.search-form{
    height:40px;
    display:inline-block;
    border-radius:20px;
    background:#fff;
    margin:50px auto;
    line-height:40px;
    font-size:18px;
    box-shadow:0px 0px 3px #111;
    overflow:hidden;
    position:relative;
    width:auto;
}

.search-form span{
    width:40px;
    height:40px;
    display:inline-block;
    text-align:center;
}
span.slens{
    position:absolute;
    z-index:1;
}
input#s{
    width:0px;
    margin:0px 0px;
    padding:0px 0px 0px 40px;
    border:none;
    height:40px;
    vertical-align:top;
    position:relative;
    z-index:2;
    background:transparent;
    -webkit-transition: width 1s; /* Safari */
    transition: width 1s; 
}

input#s:focus{
    outline:none;
    width:180px;
}


.slens i{
    color:#aaa;
}

input#s + .sclose{
    width:0px;
}

input#s:focus + .sclose{
    width:40px;
    cursor:pointer;
}

.sclose i{
    color:red;
}