カーソルを合わせるとグっと大きくなり入力する箇所が大きくなる検索ボックス。

入力する場所をアピールをしたい場合や、小さい場所に置いて必要な時だけ大きくするなど
利用する事も多いかと思い、作成してみました。

【デモ】
【HTML】

<div id="search_box">
<form>
	<input type="text" value="" name="search_text">
</form>
</div>

【CSS】

    #search_box input[type="text"] {
        transition:ease-out 0.5s;
    }

    #search_box input[type="text"] {
        width: 100px;
        height: 20px;
        border: 1px solid;
        box-sizing: border-box;
    }

    #search_box input[type="text"]:focus {
        outline: 0;
        border-color: orange;
        width: 200px;
        height:50px;
    }

こちらは、CSSのみで作成しました。
この方法が一番簡単かと思います。
ただし、submitでボタンを作成した場合、ボタンを押すときにフォーカスが外れる為押せなくなっていますので、 Enterでのみ遷移できます。
デザイン上ボタンが必要な場合はjQueryで作成する必要があるでしょう。

jQueryバージョン

【デモ】
【HTML】

<div id="search_box2">
<form>
    <input type="text" value="" name="search_text">
    <input type="submit" value="送信" >
</form>
</div>

【jQuery】

$(function(){
    $('#search_box2 input[type="text"]').on('focus',function(){
        $('#search_box2 form').addClass('focus');
    });
    $(document).on('click',function(event){
        if (!$(event.target).closest('#search_box2 input').length) {
            $('#search_box2 form').removeClass('focus');
        }
    });
});

【CSS】

#search_box2 input[type="text"] , #search_box2 input[type="submit"] {
        transition:ease-out 0.5s;
    }

    #search_box2 input[type="text"] {
        width: 100px;
        height: 30px;
        border: 1px solid;
        border-right: none;
        box-sizing: border-box;
    }

    #search_box2 form.focus input[type="text"] {
        outline: 0;
        border-color: orange;
        width: 200px;
        height:50px;
    }

    #search_box2 input[type="submit"] {
        background: none;
        text-indent: -9999px;
        width: 30px;
        height: 30px;
        position: relative;
        border: 1px solid;
        border-left: none;
        right: 5px;
        background-image: url(/img/seach_ico.png);
        background-repeat: no-repeat;
        background-size: 17px;
        background-position: right 5px center;
    }
	
    #search_box2 form.focus input[type="submit"] {
        height:50px;
        width:50px;      
        border-color: orange;
    }

基本的に、実行していることは同じです。 input以外をクリックしたときにclassを消す処理を行っています。