Search box animation on click

by Rayudu Ikkurthi

HTML

<div style="width:200px;">
<input type="search"/>
</div>

CSS

input{
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABL0lEQVQ4T6WS4VHDMAyF9TwBG8AGlA1ggzJBGzv/6QpMQPs/dsIE7QYwQjsBxwQwgR+nXNxzTXLXXv0r0UmfnqQHyZ73fgVgISKzIbwXkbW19j3Py7+hP23b3pD80EKSBwBaKCRnAO5FZA/gqaqq3xLUA7z3WnBHclnX9S5PappmDqAD8GWtffgHGGS/xRify+KUrBBjzJZk5ZzrTkYYuotzLs09Oq7mAWCpAiEEisjGWruaWpTGQwjaeWGt7cdO73rAlLRSzdSouHqJ6YwAbmOM1dgZjTEtyW9jzGPphaORYoyfyTQkeyMB0Mv05tJikh3JH+dcdVxiYeWliKid1X3qxINa2RizizG2AOZDvEuQk5Occ8aUo2oUcjYg90LWaHMRYAxyMWCArEXkheTrHwCUtqtQ1coBAAAAAElFTkSuQmCC') ;
    background-repeat:no-repeat;
    background-position:100%;
    border:0px;
   float:right;
    width:20px;
    transition:border  0.5s , width 0.5s;
}

input:focus{
    border:1px solid red;
    width:100%;
}