Для создания эффекта я использовал  jquery функцию animate которая отлично справляется с плавным изменением длинны формы. Все что нум нужно сделать это при фокусе увеличить длинну формы, а при условии когда она потеряла фокус вернуть длину в исходную. Все очень просто переходим к коду:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
#search{
width:152px;
border:1px solid silver;
color:silver;
}

#search:focus{
width:152px;
border:1px solid silver;
color:black;
}
</style>
<script>
$(document).ready(function(){
$("#search").focus(function (){
$(this).animate({"width": "250px"}, 400);
});

$("#search").blur(function (){
$(this).animate({"width": "152px"}, 400);
});
});
</script>
<input type="text" name="search" id="search" value="Поиск...">

С помощью данного метода можно изменять не только длинну, но и ширину, прозрачность, позиции, отступы. Зато к сожалению нельзя плавно изменять цвет элемента.

Так же можно регулировать скорость анимации, в данном случае число 400 заменяем другим и смотрим на происходящее.

Все это элементарно, и думаю пояснений не требует. По сути можно было бы обойтись и одним CSS для такой задачи, но тогда эффекта плавного увеличения длинны нам было бы невидать. Возникнут вопросы пишите!