<h1>CSS Floating Labels</h1>
<h2>Please fill in the form:</h2>
<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>
<a href="https://codepen.io/lbebber/">by Lucas Bebber</a> <br />
<a href="http://dribbble.com/shots/1254439--GIF-Mobile-Form-Interaction">Based on a Dribbble by Matt D. Smith</a> <br />
<a href="https://codepen.io/conlindurbin/details/DEkuG">CSS only version thanks to Conlin Durbin</a>
@import "compass/css3";

$padding-horizontal:20px;
$highlight-color:#16abf0;
body{
  background:#34495e;
  color:white;
  text-align:center;
  font-family:Helvetica, Arial, sans-serif;
  font-size:10pt;
}
h1{
  font-size:3em;
}
a{
  color:inherit;
}
form{
  width:500px;
  margin:0 auto;
  background:white;
  border-radius:10px;
  margin-bottom:20px;
  //padding:20px;
}
input, .floating-placeholder{
  font-family:Helvetica, Arial, sans-serif;
  font-size:20pt;
  line-height:2.6em;
  height:2.6em;
  margin:0;
  padding:0;
  width:100%;
}
.floating-placeholder input{
  line-height:3.4em;
}
.floating-placeholder input:focus+label{
  color:$highlight-color;
}
.floating-placeholder input[value]+label{
  color:red;
}
.floating-placeholder{
  position:relative;
}

.floating-placeholder input{
  font-size:20pt;
  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:20pt;
  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{
  @include transform(scale(0.55,0.55) rotateY(0));
}
.floating-placeholder input:valid{
  line-height:3.4em;
}
// The trick is in the "required" attribute in the input fields and the :valid pseudo-selector.

// Kinda hacky, but very cool

// Thanks for Conlin Durbin (https://codepen.io/conlindurbin) for pointing it out

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js