<div class="demoContainer">
  <div class="projHeader">
    <div class="createdBy">Created By <a href="http://www.dropinks.com/range-slider-interaction-using-jquery/">Dropinks</a>/<a href="https://dribbble.com/shots/13915508-Range-Slider-interaction" target="_blank">Dribbble</a></div>
    <p class="message">For Better usability and interaction use web browsers - chrome, firefox</p>
  </div>



  <div class="dribbbleContainer">
    <div class="searchContainer" id="searchContainer">
      <span class="prefixElm">Se</span>
      <div class="searchInput" id="searchInput">
        <input class="searchInputEdit" id="searchInputEdit" type="text"/>
        <span class="clearInput" id="clearInput"></span>
      </div>
      <span class="suffixElm">rch</span>
    </div>
  </div>
</div>

.demoContainer{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
} 
.createdBy {
  font-weight: 300;
  font-size: 17px;
  margin-top: 10px;
}
.createdBy a{
  color: #333;
  font-weight: 500;
}
.message {
  background: rgba(255, 255, 255, 0.31);
  padding: 10px;
  display: inline-block;
  text-align: center;
  color: #000;
  margin: 25px 0;
  font-size: 13px;
  box-shadow: 2px 2px 0px 1px rgba(0,0,0,0.2);
  border-radius: 4px;
}
.projHeader{
  text-align: center;
  color: #fff;
  display: none;
}

body{background: #333; font-family: poppins; margin: 0;}
.createdBy a, .message{color: #fff;}
.message{background: rgba(255, 255, 255, 0.1);}


.searchContainer{
  user-select: none;
  cursor: pointer;
  color: #fff;
  font-size: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 300;
}
.prefixElm, .suffixElm{
  opacity: 1;
  transition: 0.3s all ease;
  transform: translateX(0);
}
.searchInput{
  position: relative;
  border: 4px solid #fff;
  box-sizing: border-box;
  border-radius: 20px;
  display: inline-block;
  width: 32px;
  height: 32px;
  position: relative;
  top: 4px;
  margin: 0px 3px;
  transition: 0.3s width ease, 0.3s border ease;
}
.searchInput:after{
  content: "";
  position: absolute;
  right: -4px;
  top: -3px;
  bottom: 0;
  width: 4px;
  background: #fff;
  transition: 0.3s border ease;
  height: 30px;
  border-radius: 1px;
}
.searchInputEdit{
  visibility: hidden;
  color: #fff;
  font-size: 16px;
  padding: 0px 25px 0px 10px;
  position: absolute;
  left: 0px;
  top: 3px;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  background: transparent;
}
.clearInput{
  position: absolute;
  right: 4px;
  top: 4px;
  width: 16px;
  height: 16px;
  display: inline-block;
  background: #fff;
  border-radius: 50px;
  pointer-events: none;
}
.clearInput:before, .clearInput:after{
  content: "";
  position: absolute;
  width: 2px;
  height: 10px;
  background-color: #000;
  border-radius: 1px;
  transform-origin: center;
  left: 7px;
  top: 3px;
  opacity: 0;
  visibility: hidden;
}
.clearInput:before{
  transform: rotate(45deg)
}
.clearInput:after{
  transform: rotate(-45deg)
}


.activeFocus .clearInput{
  pointer-events: auto;
}
.activeFocus .clearInput:before, .activeFocus .clearInput:after{
  opacity: 1;
  visibility: visible;
}
.activeFocus .searchInput:after{
  opacity: 0;
}
.activeFocus .prefixElm{
  transform: translateX(10px);
  opacity: 0;
}
.activeFocus .suffixElm{
  transform: translateX(-10px);
  opacity: 0;
}
.activeFocus .searchInput:after{
  background-color: #fd1874;
}
.activeFocus .searchInput{
  width: 250px;
  border-color: #fd1874;
}
.activeFocus .searchInputEdit{
  visibility: visible;
}
.searchInputEdit:focus{
  outline: none;
}
.dribbbleContainer{
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

$(document).ready(function(){
  $("#clearInput").on("click", function(ev){
    ev.stopPropagation();
    if($("#searchInputEdit").val().length === 0){
      $("#searchContainer").removeClass("activeFocus");
    }
    else{
      $("#searchInputEdit").val("").focus();
    }
  });
  $("#searchContainer").on("click", function(ev){
    ev.stopPropagation();
    $("#searchContainer").addClass("activeFocus");
    $("#searchInputEdit").focus();
  });
  $("body").on("click", function(ev){
    ev.stopPropagation();
    if($("#searchInputEdit").val().length === 0){
      $("#searchContainer").removeClass("activeFocus");
    }
  });
})