Dark Minimalistic Login Page

Minimalistic login widget with user and password fields, keep signed in checkbox and forgot password link

Below you can find the dark version of minimalistic login page, with minor differences. This version uses placeholder text instead of floating labels, which makes better support of Internet Explorer browser.

All fields below are editable. You can experiment with the code and see the result instantly:
<form>
<div class="login-widget">
<hr class="rainbow-line">
<div class="header-container">
<h1 class="widget-header">Sign in</h1>
</div>
<div class="form-group">
<input class="input" type="text" id="login-username" placeholder="Username">
</div>
<div class="form-group">
<input class="input" type="password" id="login-password" placeholder="Password">
</div>
<div class="form-group login-controls">
<input id="checkbox-1" class="checkbox" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="label">Keep me signed in</label>
<a class="forgot-password" href="#">Forgot password?</a>
</div>
<div class="form-group">
<input type="submit" onclick="return false;" class="button wide login-submit" value="Sign In" >
</div>
</div>
</form>
HTML
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700|Quicksand:400,700');

@font-face {
font-family: "sample-font";
src:url("fonts/sample-font.eot");
src:url("fonts/sample-font.eot?#iefix") format("embedded-opentype"),
url("fonts/sample-font.woff") format("woff"),
url("fonts/sample-font.ttf") format("truetype"),
url("fonts/sample-font.svg#sample-font") format("svg");
font-weight: normal;
font-style: normal;
}

* {
box-sizing:border-box;
margin: 0;
padding: 0;
}

body {
background: #222;
text-align: center;
font-family: 'Open Sans', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

a {
color: #3498db;
}

/* Login Widget */

.login-widget {
background: #111;
border-radius: 2px;
display: inline-block;
margin-top: 50px;
max-width: 300px;
width:100%;
padding: 20px;
text-align: left;
box-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.25);
}

.rainbow-line {
height: 5px;
border-radius: 2px 2px 0 0;
border-top: 0;
border: none;
background: #c4e17f;
margin: -20px -20px 20px;
background: #8f1fd7; /* Just purple for older browsers */
background-image: -webkit-linear-gradient(left, #b2d462, #b2d462 12.5%, #d9e0a0 12.5%, #d9e0a0 25%, #ff8519 25%, #ff8519 37.5%, #e55042 37.5%, #e55042 50%, #d378b6 50%, #d378b6 62.5%, #8f1fd7 62.5%, #8f1fd7 75%, #2c79e3 75%, #2c79e3 87.5%, #17b1e7 87.5%, #17b1e7);
background-image: -moz-linear-gradient(left, #b2d462, #b2d462 12.5%, #d9e0a0 12.5%, #d9e0a0 25%, #ff8519 25%, #ff8519 37.5%, #e55042 37.5%, #e55042 50%, #d378b6 50%, #d378b6 62.5%, #8f1fd7 62.5%, #8f1fd7 75%, #2c79e3 75%, #2c79e3 87.5%, #17b1e7 87.5%, #17b1e7);
background-image: -o-linear-gradient(left, #b2d462, #b2d462 12.5%, #d9e0a0 12.5%, #d9e0a0 25%, #ff8519 25%, #ff8519 37.5%, #e55042 37.5%, #e55042 50%, #d378b6 50%, #d378b6 62.5%, #8f1fd7 62.5%, #8f1fd7 75%, #2c79e3 75%, #2c79e3 87.5%, #17b1e7 87.5%, #17b1e7);
background-image: linear-gradient(to right, #b2d462, #b2d462 12.5%, #d9e0a0 12.5%, #d9e0a0 25%, #ff8519 25%, #ff8519 37.5%, #e55042 37.5%, #e55042 50%, #d378b6 50%, #d378b6 62.5%, #8f1fd7 62.5%, #8f1fd7 75%, #2c79e3 75%, #2c79e3 87.5%, #17b1e7 87.5%, #17b1e7);
}

.widget-header {
font-size: 20px;
color: #eee;
text-transform: uppercase;
font-family: 'Quicksand', sans-serif;
}

.form-group {
position: relative;
margin: 10px 0 15px;
}

.form-group:last-child {
margin-bottom: 0;
}

/* Inputs */

.input {
background-color: transparent;
color: #666;
font-size: 15px;
padding: 10px 10px 10px 0;
position: relative;
display: block;
border: none;
width: 100%;
border-bottom: 1px solid #333;
}

.input:focus {
outline: none;
}

/* Button Styles */

.button {
display: inline-block;
padding: 9px 20px;
border: none;
background: #353535;
color: #fff;
font-size: 13px;
font-weight: bold;
line-height: 1.2em;
text-decoration: none;
border-radius: 16px;
cursor: pointer;
box-sizing: border-box;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
user-select: none;
-webkit-appearance: none;
text-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

.button:focus {
outline:none;
}

.button:hover {
background: #444;
}

.button:active {
box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}

.button.wide {
width:100%;
}

.login-submit {
text-transform: uppercase;
font-family: 'Quicksand', sans-serif;
font-size: 15px;
}

.login-controls {
font-size:13px;
color: #666;
margin: 20px 0 22px;
color:#999;
}

.forgot-password {
float: right;
margin-top: 2px;
text-decoration:none;
}

/* Custom Checkbox */

.checkbox {
opacity: 0; /* display:none may cause problems with form validation */
position: absolute;
}

.checkbox,
.label {
display: inline-block;
vertical-align: middle;
cursor: pointer;
}

.label {
position: relative;
}

.checkbox + .label:before {
content: '';
background: #666;
border: 1px solid #444;
border-radius: 3px;
display: inline-block;
vertical-align: middle;
width: 15px;
height: 15px;
padding: 2px;
margin: -3px 7px 0 0;
text-align: center;
box-sizing: border-box;
}

.checkbox:checked + .label:before {
content: "\6d";
font-family: "sample-font";
font-size: 11px;
background: #2892ed;
border: none;
color: #fff;
line-height:11px;
}
CSS
(function($) {
var formInput = $(".input");

function checkEmpty(checkInput) {
if(checkInput.val()) {
checkInput.addClass("has-text");
} else {
checkInput.removeClass("has-text");
}
}

checkEmpty(formInput);

formInput.change(function(){
checkEmpty($(this));
});
})(jQuery);
JavaScript/jQuery 1.x
Plugins used:
jQuery Apache 2.0
Browser support:
           
8+