Result

jQuery

var long = '250px';
var short = '140px';     
//フォーカス時にアニメーションエフェクトでサイズを広げる
$('input').focus(function(){
    if($(this).val()==='検索する'){
        $(this).val('');
    }
    //animate the box
    $(this).animate({
        width: long},400);
}); 
//外れたときはサイズを縮める
$('input').blur(function(){
    if($(this).val()===''){
        $(this).val('検索する');
    }
    $(this).animate({
        width: short},500);
});

​

html

<input type="search" value="検索する">

via

jquery input auto resize