A Pen by Oliver Knoblich.

Clean-Animated-Input-Labels.markdown

Clean Animated Input Labels

without placeholder attribute and focus selector to support IE 7-9

A Pen by Oliver Knoblich on CodePen.

License.

index.html

<div class="title">
  <span>Clean Animated Input Labels</span>
  without placeholder attribute and focus selector to support IE 7-9
</div>

<div class="demo demo1">
  <div class="css">
    <label for="d1">NAME</label>
    <input id="d1" type="text" />
  </div>
  <div class="css">
    <label for="d2">NAME</label>
    <input id="d2" type="text" />
  </div>
</div>

<div class="demo demo2">
  <div class="css">
    <label for="d3">NAME</label>
    <input id="d3" type="text" />
  </div>
  <div class="css">
    <label for="d4">NAME</label>
    <input id="d4" type="text" />
  </div>
</div>

<div class="demo demo3">
  <div class="css">
    <label for="d5">NAME</label>
    <input id="d5" type="text" />
  </div>
  <div class="css">
    <label for="d6">NAME</label>
    <input id="d6" type="text" />
  </div>
</div>

<div class="demo demo4">
  <div class="css">
    <label for="d7">NAME</label>
    <input id="d7" type="text" />
  </div>
  <div class="css">
    <label for="d8">NAME</label>
    <input id="d8" type="text" />
  </div>
</div>

<div class="demo demo5">
  <div class="css">
    <label for="d9">NAME</label>
    <input id="d9" type="text" />
  </div>
  <div class="css">
    <label for="d10">NAME</label>
    <input id="d10" type="text" />
  </div>
</div>

<div class="demo demo6">
  <div class="css">
    <label for="d11">NAME</label>
    <input id="d11" type="text" />
  </div>
  <div class="css">
    <label for="d12">NAME</label>
    <input id="d12" type="text" />
  </div>
</div>

<div class="demo demo7">
  <div class="css">
    <label for="d13">NAME</label>
    <input id="d13" type="text" />
  </div>
  <div class="css">
    <label for="d14">NAME</label>
    <input id="d14" type="text" />
  </div>
</div>

<div class="demo demo8">
  <div class="css">
    <label for="d15">NAME</label>
    <input id="d15" type="text" />
  </div>
  <div class="css">
    <label for="d16">NAME</label>
    <input id="d16" type="text" />
  </div>
</div>

<div class="demo demo9">
  <div class="css">
    <label for="d17">NAME</label>
    <input id="d17" type="text" />
  </div>
  <div class="css">
    <label for="d18">NAME</label>
    <input id="d18" type="text" />
  </div>
</div>

<div class="demo demo10">
  <div class="css">
    <label for="d19">NAME</label>
    <input id="d19" type="text" />
  </div>
  <div class="css">
    <label for="d20">NAME</label>
    <input id="d20" type="text" />
  </div>
</div>

script.js

$(document).ready(function() {

  $('input').each(function() {

    $(this).on('focus', function() {
      $(this).parent('.css').addClass('active');
    });

    $(this).on('blur', function() {
      if ($(this).val().length == 0) {
        $(this).parent('.css').removeClass('active');
      }
    });

    if ($(this).val() != '') $(this).parent('.css').addClass('active');

  });

});

style.scss

@import "compass";
@import url('http://fonts.googleapis.com/css?family=Roboto');

$b: #aaa;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font: 16px/1 'Roboto', sans-serif;
  text-align: center;
  color: #555;
  background: #ddd;
}

.title {
  padding: 35px 0 40px;
  color: #999;
  border-bottom: 1px solid $b;
}

.title span {
  display: block;
  margin: 0 0 15px;
  font-size: 30px;
  color: #555;
}

.demo {
  padding: 35px 0;
  border-bottom: 1px solid $b;
  background: #eee;
}

.demo:nth-child(odd) {
  background: none;
}

.demo:last-child {
  border: 0;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline;
  border: 0;
  outline: 0;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input[type='text'] {
  width: 220px;
  padding: 10px 10px 12px 60px;
  font-size: 12px;
  color: #555;
  border: 1px solid $b;
  background-color: #fff;
}

.css {
  display: inline-block;
  position: relative;
  margin: 0 5px 0 0;
}

.css input {
  transition: .1s all linear;
}

.css label {
  position: absolute;
  top: 13px;
  left: 15px;
  font-size: 12px;
  color: #aaa;
  transition: .1s all linear;
  cursor: text;
}

.demo1 .css.active input {
  padding-left: 45px;
}

.demo1 .css.active label {
  left: 6px;
  opacity: .5;
}

.demo2 .css.active input {
  padding-left: 15px;
}

.demo2 .css.active label {
  top: 3px;
  font-size: 9px;
  opacity: .8;
}

.demo3 .css.active input {
  padding-left: 15px;
}

.demo3 .css.active label {
  top: -18px;
}

.demo4 .css.active input {
  padding-left: 15px;
}

.demo4 .css.active label {
  top: 0;
  left: 0;
  font-size: 40px;
  opacity: .1;
}

.demo5 .css.active label {
  top: 8px;
  left: 10px;
  padding: 5px;
  color: #fff;
  background: $b;
}

.demo6 .css.active input {
  padding-left: 70px;
}

.demo6 .css.active label {
  top: 0;
  left: 0;
  padding: 14px;
  color: #fff;
  background: $b;
}

.demo7 .css.active label {
  top: 8px;
  left: 10px;
  padding: 5px;
  background: #eee;
  box-shadow: inset 0 0 0 1px $b;
}

.demo8 .css.active input {
  padding-left: 25px;
}

.demo8 .css.active label {
  top: 15px;
  left: 0;
  font-size: 10px;
  transform: rotate(-90deg);
}

.demo9 .css.active input {
  padding-left: 15px;
}

.demo9 .css.active label {
  top: -15px;
  left: 0;
  padding: 3px 5px;
  font-size: 10px;
  color: #fff;
  background: $b;
}

.demo10 .css.active input {
  padding-left: 15px;
}

.demo10 .css.active label {
  top: 39px;
  left: 0;
  width: 220px;
  padding: 3px 5px;
  font-size: 10px;
  color: #fff;
  background: $b;
}