SO - 28367200

by DannyEnglander

HTML

<center>
    <div class="content">
        <form method="POST" action="" class="loginForm">
            <div class="inputGroup">
                <input type="text" name="username" value="dd" />
                <!--The field gets a value with php so cant do it here -->
                <label>Username</label>
            </div>
            <div class="inputGroup">
                <input type="password" name="password" />
                <label>Password</label>
            </div>
            <input type="submit" value="Log In" name="submit" class="flatButton" />
        </form>
    </div>
</center>

CSS

body {
    padding: 100px;
    -webkit-font-smoothing: antialiased;
    background: #ecf0f1;
    background-size: 5%;
}
.blue {
    background: #0056F5;
    width: 100%;
    height: 100%;
}
.red {
    background: #F50000;
    width: 100%;
    height: 100%;
}
.content {
    /*margin-top: 15%;*/
    position: absolute;
    top: 50%;
    margin-top: -100px;
    left: 0;
    width: 100%;
}
input {
    background: none;
    border: solid 2px #21a1e1;
    padding: 15px 40px;
    font-size: 18px;
    display: inline-block;
    color: #21a1e1;
    font-family:"Code Light";
}
input:focus, input:active {
    outline: none;
}
input[type="text"], input[type="email"], input[type="password"] {
    border: none;
    border-bottom: solid 2px #21a1e1;
}
.inputGroup .redBorder {
    border: none;
    border-bottom: solid 2px #e74c3c;
}
input[type="submit"]:active {
    color: white;
    background: #21a1e1;
}
.inputGroup {
    display: inline-block;
    margin-right: 20px;
    position: relative;
}
.inputGroup input {
    padding: 15px 0px;
}
.inputGroup label {
    position: absolute;
    top: 50%;
    left: 0px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 18px;
    color: #999;
    pointer-events: none;
    -webkit-transition: all 0.15s ease-out 0s;
    transition: all 0.15s ease-out 0s;
}
.inputGroup input:focus + label, .inputGroup input.has-value + label {
    top: -10px;
    font-size: 12px;
    color: #aaa;
}

JavaScript

$(function () {
    $('.loginForm .inputGroup input').focusout(function () {
        var text_val = $(this).val();
        if (text_val === "") {
            $(this).removeClass('has-value');
        } else {
            $(this).addClass('has-value');
        }
    }).focusout();//trigger the focusout event manually
});