Simple placeholder IE8 compatible

by amiramix

HTML

<div><label for="email">Email</label> <input type="text" name="email" id="email" /></div>

<div><label for="password">Password</label> <input type="password" name="password" id="password" /></div>

CSS

input {
    background-color: transparent;
    padding: 2px;
}

label {
    color: gray;
    padding: 2px 4px;
    position: absolute;
    z-index: -1;
}

JavaScript

$('input')
    .focus(function() {
        $(this).css('background-color', 'white');
    })
    .blur(function() {
        if($.trim($(this).val()) == '') {
            $(this).css('background-color', 'transparent').val('');
        }
    });