A Pen by rednakse.

index.html

<!--

Copyright © David Bushell | @dbushell | http://dbushell.com/

-->

<div class="field">
  <label class="field__label" for="form-name">Name</label>
  <input class="field__input" type="text" required placeholder="Name…" id="form-name">
</div>

<p>This technique uses CSS (no JavaScript). <strong>Warning:</strong> The <code>:valid</code> selector is used meaning it will only work with <code>type="text"</code>. Otherwise with <code>type="email"</code> for example, the label won't appear until the input value actually validates.</p>

<hr>

<div class="field">
  <label class="field__label" for="form-email">Email</label>
  <input class="field__input" type="email" required placeholder="[email protected]…" id="form-email">
</div>

<p><strong>Browser support:</strong> unforunately the <code>placeholder</code> attribute requires IE10+ so in IE9 you get no label whatsoever (so show the label by default and progressively enhance this fancy stuff).</p>

<hr>

<p>Inspired by <a href="http://bit.ly/1cyaGeU">Matt D. Smith</a></p>

style.scss

@import "compass";
/*

Copyright © David Bushell | @dbushell | http://dbushell.com/

*/

@function em($px, $base: 16) {
    @return ($px / $base) + em;
}

// field

.field {
  position: relative;
  padding-bottom: em(30);
  margin-bottom: em(30);
  max-width: em(320);
}

.field__label {
  display: block;
  position: absolute;
  top: em(15, 12);
  font-size: em(12);
  line-height: em(15, 12);
  font-weight: bold;
  color: #2996cc;
}

.field__input {
  position: absolute;
  display: block;
  box-sizing: border-box;
  font-size: em(16);
  line-height: em(20);
  padding: em(5) 0;
  height: em(30);
  width: 100%;
  border: 0;
  outline: none;
  border-bottom: em(2) solid #bbb;
  
  &:valid {
    position: relative;
    top: em(30);
    margin-top: em(-30);
  }

  &:focus {
    border-bottom-color: #2996cc;
  }
}

// house keeping


body {
  padding: em(30);
}

hr {
  display: block;
  clear: both;
  margin: em(30) 0;
  border: 0;
  outline: 0;
  height: 2px;
  background: #ddd;
}

suLfE.markdown

suLfE

A Pen by rednakse on CodePen.

License.