Edit in JSFiddle

$(function() {
    $('.search-form .sc').on("click", function() {
        $(this).hide()
            .parent().addClass('focus')
                .stop().animate({width:200}, 120, "swing")
                    .find('input').trigger("focus")
                        .on("focusout", function() {
            $(this).next().show()
                .parent().removeClass('focus')
                    .stop().animate({width:26}, 120, "swing");
        });
        return false;
    });
});

<form class="search-form" action="/search" method="get">
    <div class="input-wrapper">
        <input type="text" name="q" placeholder="cari...">
        <a title="Search" class="sc" href="/"></a>
    </div>
</form>

.input-wrapper {
  border:1px solid #333;
  width:26px;
  height:26px;
  background-color:#eee;
  -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
  -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
  -webkit-border-radius:0px;
  -moz-border-radius:0px;
  border-radius:0px;
  overflow:hidden;
  position:relative;
}

.input-wrapper input,
.input-wrapper input:focus {
  border:none;
  background:none;
  margin:0 0;
  padding:0 16px;
  display:block;
  width:200px;
  height:26px;
  font:italic bold 12px/26px Arial,Sans-Serif;
  color:#333;
  outline:none;
}

.input-wrapper.focus {
  background-color:#eee;
  border-color:#000;
}

.input-wrapper .sc {
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGOSURBVDhPrZJPSwJRFMXPokD6BkFQyzaRQUGrKII21a5Vu9oHLVq07hNUSFSYWqOmwjSGY0aRQqsCXUQJlaXSaEZamI2mTnV7WguNMUR6cHiX98793fv+AP8+9gvd2P9cYuKZdPDQYH01/NSMPcWCYyIcVMjL4r13AT7S/A1yFZzM+J3sUZYZbByisojDEuCD4C4GGKRJHbIjj+DoxyjI2iqTmGuHq/AIt0JwFgdqAF4dcOUJvDynanDK8xCLBCHjrQF48WE3S9h+61A18C/97DiEnXRaHWBPiuDTBHtqQtXgSE1BkAm2pF8dYHuYheOJYE3kVQ3WRACOVGl/uvZLmOMxWO4JW9IFzLExcNFWcNIouNgJrGzdHCup+oKraJzUBlM4DovE7iJB5YqlmbsjbEYfsBXJwp5k8U1v7S6MEQ2MoRnob5/L3RhvMzCEFrDmb4H+ugebkSI2Qp8w3HTV9zt/u0yhIQbMwRjOw3De1xhkNTiM9eAHTFHC2mVnYxDdqRb6KwUrZ5ONASqyvgCU5N7E8iBBBAAAAABJRU5ErkJggg==') no-repeat 50% 50%;
  -webkit-border-radius:0px;
  -moz-border-radius:0px;
  border-radius:0px;
}