Style LABELs under INPUTs

This is (more or less) the correct way to style labels under inputs. The minimal Javascript is there only to toggle the `notEmpty` class on the LABEL. This is necessary because at the moment there is way to tell if an INPUT is empty or not with CSS alone.

HTML

<div id="container">
<form action='' method='post'>
  <label>
    <span>
      <i class='fontawesome-lock'></i> Your Name
    </span><input type='text' name='Name' />
  </label>
  <label>
    <span>
      <i class='fontawesome-lock'></i> Password
    </span><input type='password' name='Password' />
  </label>
    <label>
    <span>
      <i class='fontawesome-file'></i> Text
    </span><input type='textarea' name='Text' />
  </label>
  <div class='submit'>
    <button type='submit'>Submit</button>
  </div>
</form>
</div>

CSS

@import 'http://weloveiconfonts.com/api/?family=fontawesome';
@import 'http://fonts.googleapis.com/css?family=Ubuntu';
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font: 12px 'Ubuntu', Arial, sans-serif;
}

i[class*="fontawesome-"]:before {
    font-family: 'FontAwesome', sans-serif;
    font-style: normal;
    display: inline-block;
    min-width: 1.1em;
    text-align: center;
}
#container {
  width: 80%;
  height: 80%;
  margin: auto;

}
form {
  margin-top: 40px;
    width: 100%;
    height: 100%;
    margin: auto;
}

form label {
    display: block;
    padding: 0 .4em;
    border: 1px solid #ccc;
    color: #aaa;
    margin-bottom: .2em;
    border-radius: 4px;
}

form label span, 
form label input {
    vertical-align: middle;
    width: 100%;
}

form label span {
    display: inline-block;
    margin-right: -100%;
}

form label input {
    border: 0;
    padding: .2em 0;
    background: none;
    background-color: rgba(255, 255, 255, 0);
    font-family: inherit;
    font-size: 1em;
    -webkit-transition: background-color 150ms ease-in-out;
    -moz-transition: background-color 150ms ease-in-out;
    transition: background-color 150ms ease-in-out;
}

form label input:focus {
    background-color: rgba(255, 255, 255, 0.6);
}

form label.notEmpty input {
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
    background-color: white;
}

form .submit {
    text-align: right;
}

form .submit button {
    font-family: inherit;
    font-size: 1em;
    cursor: pointer;
}



input[type="textarea"] {
  height: calc(100% - 100px);
  height: 600px;
}

JavaScript

jQuery(function() {
  $("form").on("keyup", "input", function() {
    var input = $(this);
    input.parent().toggleClass("notEmpty", !!input.val());
  });
});