さぁ!検索しよう!

jQueryを使い、検索フォームを開閉式にする方法です。

DEMO

テキストエリアをフォーカスするとテキストエリアが伸び、フォーカスが外れると元に戻ります。

HTML

<form id="searchform">
    <div>
        <input type="text" id="keyword" placeholder="Search" />
        <input type="submit" id="submit" value="&#xf002;" />
    </div>
</form>

CSS

* {
    box-sizing: border-box;
}

body {
    background: #40AAEF;
}

#searchform {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
}

#keyword,
#submit {
    background: #0E7AC4;
    border: none;
    color: #fff;
    display: inline-block;
    line-height: 1.5em;
    outline: none;
    padding: 10px;
    position: absolute;
}

#keyword {
    border-radius: 20px;
    color: #fff;
    right: 0;
    width: 40%;
}

#submit {
    border-radius: 0 20px 20px 0;
    cursor: pointer;
    font-family: "FontAwesome";
    right: 0;
    width: 20%;
}

高さを揃える

テキストエリア#keywordと検索ボタン#submitの高さを揃えるため、以下の2行を記述しています。

display: inline-block;
line-height: 1.5em;

テキストエリアの初期状態

フォーカスすると伸びるようにするため、テキストエリア#keywordの初期状態はwidth40%と短くしています。

jQuery

$(function() {
    var $keyword = $('#keyword');
    $keyword.focus(function() {
        $(this).animate({
            width: '80%'
        }, 200, 'linear');
    });
    $keyword.blur(function() {
        $(this).animate({
            width: '40%'
        }, 200, 'linear');
    });
});

focus

$keywordがフォーカスされると、$keywordwidth40%80%に変化します。これによってテキストエリアが伸びます。

$keyword.focus(function() {
    $(this).animate({
        width: '80%'
    }, 200, 'linear');
});

blur

$keywordのフォーカスが外れると、$keywordwidth80%40%に変化します。これによってテキストエリアが元の長さに戻ります。

$keyword.blur(function() {
    $(this).animate({
        width: '40%'
    }, 200, 'linear');
});

以上で、を終わります。

参考文献

inputのtextとsubmitの高さがズレる – Webデザイン・CSS | 【OKWAVE】