title: How to move placeholder to top on focus AND while typing?
body: <p>I want the placeholder to move to the top when the textbox is on focus and also while the user is typing.</p>
  
  <p>I'm not sure if this is just html/css or any javascript too.</p>
  
  <p>My current css looks like this, and I have no js code yet:</p>
  
  <pre><code>input:focus::-webkit-input-placeholder {
      font-size: .75em;
      position: relative;
      top: -15px; 
      transition: 0.2s ease-out;
  }
  
  input::-webkit-input-placeholder {
      transition: 0.2s ease-in;
  }
  
  input[type="text"]:focus, input[type="password"]:focus {
      height: 50px;
      padding-bottom: 0px;
      transition: 0.2s ease-in;
  }
  
  input[type="text"], input[type="password"] {
      height: 50px;
      transition: 0.2s ease-in;
  }
  </code></pre>
  
  <p>It almost does the work but the placeholder disappears when I start typing. I'm using twitter-bootstrap, if that makes anything easier!</p>
  
  <p>Thanks.</p>