Search Box

by btevfik

HTML

<input type="text" id="box" value="Search..." />

CSS

#box {
    width:60px;
    color:gray;
}

JavaScript

$(document).ready(function () {

    //focus in
    $("#box").focus(function () {
        $("#box").val("");
        $("#box").css("color", "black");
        $("#box").animate({
            width: '200px'
        },
            "slow")
            .delay(1500)
    });

    //focus out (blur)
    $("#box").blur(function () {
        $("#box").css("color", "gray");
        $("#box").animate({
            width: '60px'
        },
            "slow")
            .delay(1500)
        $("#box").val("Search...");
    });
});