grad 4

by Larry Adams

HTML

<div>
 
    <h1>Login Form</h1>
 
    <form action="#">
 
        <input type="text" name="username" placeholder="username">
 
        <input type="password" name="password" placeholder="password">
 
        <span>
            <input type="checkbox" name="checkbox">
            <label for="checkbox">remember</label>
        </span>
 
        <input type="submit" value="log in">
 
    </form>
 
</div>

CSS

.login-form input[type=text]:focus,
.login-form input[type=password]:focus {
    background: #e1e1e1;
    background: -moz-linear-gradient(top,  #ffffff 0%, #e1e1e1 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e1e1e1));
    background: -webkit-linear-gradient(top,  #ffffff 0%,#e1e1e1 100%);
    background: -o-linear-gradient(top,  #ffffff 0%,#e1e1e1 100%);
    background: -ms-linear-gradient(top,  #ffffff 0%,#e1e1e1 100%);
    background: linear-gradient(top,  #ffffff 0%,#e1e1e1 100%);
}
 
.js .login-form input[type=checkbox] {
    position: fixed;
    left: -9999px;
}

.js .login-form span {
    width: 16px;
    height: 16px;
    cursor: pointer;
 
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.js .login-form span.checked:before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
 
    -webkit-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .45), inset 0px 1px 1px 0px rgba(0,0,0, .3);
    -moz-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .45), inset 0px 1px 1px 0px rgba(0,0,0, .3);
    box-shadow: 0px 1px 1px 0px rgba(255,255,255, .45), inset 0px 1px 1px 0px rgba(0,0,0, .3);
}

.login-form label {
    position: absolute;
    top: 1px;
    left: 25px;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 12px;
    color: #e4e4e4;
}

JavaScript

$(document).ready(function() {
 
    // Check if JavaScript is enabled
    $('body').addClass('js');
 
    // Make the checkbox checked on load
    $('.login-form span').addClass('checked').children('input').attr('checked', true);
 
    // Click function
    $('.login-form span').on('click', function() {
 
        if ($(this).children('input').attr('checked')) {
            $(this).children('input').attr('checked', false);
            $(this).removeClass('checked');
        }
 
        else {
            $(this).children('input').attr('checked', true);
            $(this).addClass('checked');
        }
 
    });
 
});