Анимированная поисковая форма

Форма поиска, которая плавно расширяется при клике по ней. Очень красиво смотрится и работает, можно сказать во всех браузерах. Даже сюда в планах её приспособить.

HTML

Основное, это естественно создание самой поисковой формы

<form id="searchForm">
    <fieldset>
        <div class="input">
            <input type="text" name="s" id="s" value="Поиск..." />
        </div>
        <input type="submit" id="searchSubmit" value="" />
    </fieldset>
</form>

CSS

Именно для поисковой формы:

#searchForm fieldset {
    width:240px;
    position:relative;
    display:block;
}
div.input {
    width:120px;
    padding:5px 15px 7px 15px;
    border-radius:20px;
    border:1px solid #c6d2db;
    border-top:1px solid #b4c1cb;
    box-shadow:inset 0 1px 2px rgba(0,0,0,0.08);
    float:right;
    background:#e8edf1;
}
    div.input.focus {
        border:1px solid #9ecbe2;
        box-shadow:0 0 6px #abdcff, inset 0 1px 2px rgba(0,0,0,0.08);
    }
input#s {
    width:100%;
    border:0;
    border-radius:20px;
    background:transparent;
    height:16px;
    color:#b4bdc4;
    text-shadow:0 1px 1px #fff;
}
    input#s:focus {
        outline:none
    }
input#searchSubmit {
    width:19px;
    height:19px;
    text-indent:-9999px;
    overflow:hidden;
    background:url(../images/search-icon.png) no-repeat;
    border:0;
    position:absolute;
    top:7px; right:13px;
    z-index:5;
    display:none;
    cursor:pointer;
}

JS

Подключаем библиотеку jQuery и плагин для цветовой анимации:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="js/jquery.color.js"></script>

И файл скрипта, поддерживающего даже IE6:

$(function(){
    var input = $('input#s');
    var divInput = $('div.input');
    var width = divInput.width();
    var outerWidth = divInput.parent().width() - (divInput.outerWidth() - width) - 28;
    var submit = $('#searchSubmit');
    var txt = input.val();
    
    input.bind('focus', function() {
        if(input.val() === txt) {
            input.val('');
        }
        $(this).animate({color: '#000'}, 300); // text color
        $(this).parent().animate({
            width: outerWidth + 'px',
            backgroundColor: '#fff', // background color
            paddingRight: '43px'
        }, 300, function() {
            if(!(input.val() === '' || input.val() === txt)) {
                if(!($.browser.msie && $.browser.version < 9)) {
                    submit.fadeIn(300);
                } else {
                    submit.css({display: 'block'});
                }
            }
        }).addClass('focus');
    }).bind('blur', function() {
        $(this).animate({color: '#b4bdc4'}, 300); // text color
        $(this).parent().animate({
            width: width + 'px',
            backgroundColor: '#e8edf1', // background color
            paddingRight: '15px'
        }, 300, function() {
            if(input.val() === '') {
                input.val(txt)
            }
        }).removeClass('focus');
        if(!($.browser.msie && $.browser.version < 9)) {
            submit.fadeOut(100);
        } else {
            submit.css({display: 'none'});
        }
    }).keyup(function() {
        if(input.val() === '') {
            if(!($.browser.msie && $.browser.version < 9)) {
                submit.fadeOut(300);
            } else {
                submit.css({display: 'none'});
            }
        } else {
            if(!($.browser.msie && $.browser.version < 9)) {
                submit.fadeIn(300);
            } else {
                submit.css({display: 'block'});
            }
        }
    });
});