Pure CSS Floating Labels For Text Fields

Category: CSS & CSS3 , Form | July 7, 2014
Views Total:24,388 views
Official Page:Go to website
Last Update:July 7, 2014


Pure CSS Floating Labels For Text Fields


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 />
  <span></span> </div>
<div class="styled-input wide">
  <textarea required></textarea>
  <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%; }
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;
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;

You Might Be Interested In:

One thought on “Pure CSS Floating Labels For Text Fields

  1. Chirag Suthar

    hello, i have to use span tag above is not working ,please check attched image:

    b’cus wp contact form 7 add class above span tag.



Leave a Reply