Стилизирование полей формы с помощью css и jQuery

Март 18th, 2010

Создавая сайты всегда хочется, чтоб он нравился окружающим, для этого добавляют в него всякие эффекты, нужные и не нужные. Сегодня я хочу поделиться с вами одним очень интересным способом стилизировать поля ваших форм с помощью css и jQuery.

html разметка

Прежде чем создавать красивую форму нам нужно просто создать форму, точней html код этой формы:

<div id="login">
    <div class="sayit">Log In:</div>
    <form action="javascript:void(0)" onsubmit="login()" autocomplete="off">
        <label for="username">Username</label>
        <input type="text" id="username"/>
        <label for="password">Password</label>
        <input type="password" id="password"/>
        <input type="submit" class="medium button green" value="Log me In"/>
    </form>
</div>

Объяснений думаю тут не требуется, код самый стандартный. Следует отметить, что для работы скрипта нам не потребуются классы и идентификаторы элементов формы, поэтому вы их можете менять на свое усмотрение.

css стили

input[type=text],input[type=password]{padding: 5px 10px; background-color: transparent;	position: relative; z-index: 2;}
label{position: absolute; z-index: 1;-webkit-transition: opacity 0.15s linear; color: #bababa; background-color: #FFFFFF; }

#login{width: 290px; margin: 0 auto;}
#login input[type=text],#login input[type=password]{width:270px; margin: 5px 0; font-size: 24px; font-weight: bold; border: 1px solid #ccc; -moz-border-radius:5px; -webkit-border-radius:5px; color: #595959;}
#login label{font-size: 24px; margin: 14px 10px;}

#login .sayit{font-size:24px; color: #595959; font-style: italic; padding-bottom: 5px;}

Стили для формы тоже достаточно просты. Но заметьте, что для элемента label необходимым является правило position: absolute;

jQuery

$(document).ready(function(){
    $.string(String.prototype);
    $("input,textarea").each(function (type) {
        $(this).focus(function () {
            if($(this).val().blank())
                $(this).prev("label").fadeTo('fast',0.45);
        });

        $(this).keypress(function () {
            $(this).prev("label").fadeTo('fast',0);
        });

        $(this).blur(function () {
            if($(this).val().blank()){
                $(this).prev("label").fadeTo('fast',1);
            }
        });
    });
});

Добавьте этот код себе на страницу. Ну и конечно же не забудьте подключить библиотеку jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

И кроме библиотеки нам понадобится еще один маленький плагин

download plugin