Pure CSS Floating Labels For Text Fields

Preview:

Description:

With pure CSS and CSS3 transitions, we can create animated & floating labels when a text field is populated with text. Inspired by Matt D. Smith’s design and created by skielbasa.

How to use it:

Create text fields (input or textarea) with text labels.

<div class="styled-input">
  <input type="text" required />
  <label>Name</label>
  <span></span> </div>

<div class="styled-input wide">
  <textarea required></textarea>
  <label>Message</label>
  <span></span> </div>

The CSS styles to animate the floating labels when your text fields are focused on.

input:focus ~ label, textarea:focus ~ label, input:valid ~ label, textarea:valid ~ label {
 font-size: 0.75em;
 color: #8e44ad;
 top: -2.25rem;
 -webkit-transition: all 0.125s ease;
 transition: all 0.125s ease;
}

.styled-input {
  float: left;
  width: 33.3333%;
  margin: 2rem 0 1rem;
  position: relative;
}

.styled-input label {
  color: #999;
  padding: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  pointer-events: none;
}

.styled-input.wide { width: 100%; }

input,
textarea {
  padding: 1rem 1rem;
  border: 0;
  width: 100%;
  font-size: 1rem;
}

input ~ span,
textarea ~ span {
  display: block;
  width: 0;
  height: 3px;
  background: #8e44ad;
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-transition: all 0.125s ease;
  transition: all 0.125s ease;
}

input:focus,
textarea:focus { outline: 0; }

input:focus ~ span,
textarea:focus ~ span {
  width: 100%;
  -webkit-transition: all 0.075s ease;
  transition: all 0.075s ease;
}

textarea {
  width: 100%;
  min-height: 15em;
}