<h1>Floating Form Labels</h1>
<form>
<div class="floating-placeholder">
  <input id="name" name="name" type="text" required/>
  <label for="name">Name</label>
</div>
<div class="floating-placeholder">
  <input id="address" name="address" type="text"  required/>
  <label for="address">Address</label>
</div>
<div class="floating-placeholder">
  <input id="city" name="city" type="text" required/>
  <label for="city">City</label>
</div>
<div class="floating-placeholder">
  <input id="password" name="password" type="password" required/>
  <label for="password">Password</label>
</div>
  
</form>
@import "compass/css3";

$padding-horizontal:20px;
$highlight-color:#16abf0;

body {
  background:#5FD9FF;
  color:white;
  text-align:center;
  font-family:Helvetica, Arial, sans-serif;
  font-size:10pt;
}

h1 {
  font-size:1.6em;
}

form {
  width:500px;
  margin:0 auto;
  background:white;
}

input, .floating-placeholder {
  font-family:Helvetica, Arial, sans-serif;
  font-size:18pt;
  line-height:2em;
  height:2em;
  margin:0;
  padding:0;
  width:100%;
}

.floating-placeholder input{
  line-height:2.8em;
}

.floating-placeholder input:valid{
  line-height:2.8em;
}

.floating-placeholder input:focus+label{
  color:$highlight-color;
}

.floating-placeholder input[value]+label{
  color:red;
}

.floating-placeholder{
  position:relative;
}

.floating-placeholder input{
  font-size:18pt;
  border:none;
  outline:none;
  position:absolute;
  top:0;
  left:0;
  display:block;
  background:transparent;
  z-index:2;
  border-bottom:1px solid #ccc;
  text-indent:$padding-horizontal;
}

.floating-placeholder:last-child input{
  border-bottom:none;
}

.floating-placeholder label{
  display:block;
  position:absolute;
  top:0;
  left:$padding-horizontal;
  font-size:16pt;
  z-index:1;
  @include transform-origin(0,0.0em);
  @include transition(transform 160ms, color 200ms);
  @include transform(scale(1,1) rotateY(0));
  color:#999;
}

.floating-placeholder input:valid~label{
  top: -.2em;
  @include transform(scale(0.55,0.55) rotateY(0));
}
View Compiled
/*
  Developed with love by Blu Frame

  http://blufra.me  
*/
Rerun