Dynamic Drive CSS Library- Pop up form labels

CSS Library

Hosting Discounts

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

CSS Library: Form CSS: Here

Pop up form labels

Author: Dynamic Drive

When it comes to filling out form fields, any contextual help is always appreciated. This CSS code takes the label element of a form field and transforms it into a pop up label that's sure to get noticed, not to mention provide guidance. It uses CSS child and adjacent selectors to automatically select the label element that immediately follows the corresponding form element, and with CSS3 transform and positioning, pop it up into view.

Demo (focus your mouse on any of the form fields):

The CSS:


<style>

form div.dynamiclabel{ /* div container for each form field with pop up label */
  display: block;
  margin: 30px;
	font: 16px;
  position: relative;
}


form div.dynamiclabel input[type="text"], form div.dynamiclabel textarea{
  width: 320px;
  padding: 10px;
  border: 1px solid #c3c3c3;
  border-radius: 7px;
}

form div.dynamiclabel textarea{
	height: 200px;
}


form div.dynamiclabel label{ /* pop up label style */
  position: absolute;
  left: 0;
  background: lightyellow;
  border: 1px solid yellow;
  border-radius: 2px;
  padding: 3px 10px;
  box-shadow: 4px 1px 5px gray;
  font-weight: bold;
	-webkit-backface-visibility: hidden;
	top: 10px; /* initial top position of label relative to dynamiclabel container */
  -moz-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transition: all 0.4s ease-in-out; /* Safari doesn't seem to support cubic-bezier values beyond 0 to 1, so use keyword value instead */
  -o-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  opacity: 0;
  z-index: -1;
}


form div.dynamiclabel > *:focus{ /* when user focuses on child element inside div.dynamiclabel */
  border: 1px solid #45bcd2;
  box-shadow: 0 0 8px 2px #98d865;
}


form div.dynamiclabel > *:focus + label{ /* label style when user focuses on child element inside div.dynamiclabel */
  opacity: 1;
  z-index:100;
	top: -35px; /* Post top position of label on focus relative to dynamiclabel container */
	-ms-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-webkit-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

</style>

The HTML:

<form>
  <div class="dynamiclabel">
    <input id="name" placeholder="Name" type="text">
    <label for="name">Name</label>
  </div>

  <div class="dynamiclabel">
    <input id="email" placeholder="Email Address" type="text">
    <label for="email">Email Address</label>
  </div>

  <div class="dynamiclabel">
    <textarea id="feedback" placeholder="Feedback"></textarea>
    <label for="feedback">Feedback</label>
  </div>
</form>

Code Info

Rate this code:

Date Posted: 02/04/2015

Revision History: None

Usage Terms: Click here