Pure CSS Floating Labels For Text Fields

Category: CSS & CSS3 , Form | July 7, 2014
Author: skielbasa
Views Total: 8,986
Official Page: Go to website
Last Update: July 7, 2014
License: Unknown

Preview:

Pure CSS Floating Labels For Text Fields

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;
}

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.

    Thanks,
    Chirag

    Reply

Leave a Reply