Edit in JSFiddle


              
<form action="http://blogismi.com/search/" id="search" method="get">
<input name="q" placeholder="Ne Aramıştınız ?" size="40" type="text"></form>
    
#search input[type="text"]:hover {width:208px;border:1px solid #CCC;}
#search input[type="text"] {
background: #FFF url("http://2.bp.blogspot.com/-QrhUJtUBTdc/UTZhTNtkwFI/AAAAAAAABB0/SSp7EhBqyak/s000/search_32x32-32.png")no-repeat center left;
font-size: 13px;
color: #222;
width: 0px;
padding: 10px 0px 11px 35px;
z-index: 9;
border: 1px solid #FFF;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
margin-bottom: -1px;
position: absolute;
top: 0px;
right:20px;}