CSS Animated Input

css-animated-input.markdown

CSS Animated Input

Inspired by a Codrops Article.

A Pen by Ben Gallagher on CodePen.

License.

index.html

<h1>CSS3 Animated Input Box</h1>
<div class="container">
  <span class="input input--name">
    <input class="input__field" type="text" id="name" />
    <label class="input__label" for="name">
		      <span class="input__label-content">Name</span>
		    </label>
    <span class="input__focuslabel">
      <span class="input__focuslabel-content" aria-hidden="true">Name</span>
    </span>
  </span>
</div>
<div class="container">
  <span class="input input--location">
    <input class="input__field" type="text" id="location" />
    <label class="input__label" for="location">
		      <span class="input__label-content">Location</span>
		    </label>
    <span class="input__focuslabel">
      <span class="input__focuslabel-content" aria-hidden="true">Location</span>
    </span>
  </span>
</div>

script.js

$(document).ready(function() {
  $('.input--name .input__field').keyup(function() {
    if ($(this).val()) {
      $('.input--name').addClass('input--filled');
    } else {
      $('.input--name').removeClass('input--filled');
    }
  });
  $('.input--location .input__field').keyup(function() {
    if ($(this).val()) {
      $('.input--location').addClass('input--filled');
    } else {
      $('.input--location').removeClass('input--filled');
    }
  });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.less

@import "lesshat";

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,600);

@Blue: #0C2A62;
@Silver: #9D9EA0;
@LightSilver: #EFEFEF;

body {
  background: @LightSilver;
  font-family: 'Open Sans', sans-serif;
}

h1 {
  color: @Blue;
  text-align: center;
}

.container {
  padding: 0;
  width: 335px;
  margin: 75px auto;
  & .input {
    position: relative;
	  z-index: 1;
	  display: inline-block;
	  width: 100%;
	  vertical-align: top;
  }
  & .input__field {
    position: absolute;
    top: 0;
	  display: block;
	  padding: 12px 15px;
	  width: 100%;
	  border: none;
	  border-radius: 0;
	  background: transparent;
	  color: darken(@Silver, 25%);
	  font-weight: bold;
    font-size: 16px;
    &:focus {
      outline: none;
    }
    &:focus + .input__label .input__label-content {
	    transform: translate3d(0, -34px, 0);
    }
    &:focus ~ .input__focuslabel {
      height: 20px;
      & .input__focuslabel-content {
        transform: translate3d(0, -15px, 0);
      }
    }
  }  
  & .input__label {
    position: absolute;
    z-index: -1;
    top: 0;
    display: inline-block;
	  padding: 0 7px;
	  width: 100%;
	  color: @Blue;
    text-align: left;
	  font-weight: bold;
	  font-size: 12px;
    overflow: hidden;
    &-content {
      position: relative;
	    display: block;
	    padding: 16px 0;
	    width: 100%;
	    transition: transform 0.5s;
    }
    &::after {
      content: '';
      position: absolute;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 2px;
      background: @Blue;
      transition: transform 0.5s;
    }
    &:after {
      bottom: 0;
    }
  }
  & .input__focuslabel {
    position: absolute;
    display: inline-block;
    padding: 0px 7px;
    width: 100%;
    color: @LightSilver;
    background: @Blue;
    text-align: left;
    font-weight: bold;
    font-size: 12px;
    overflow: hidden;
    vertical-align: bottom;
    bottom: 0;
    height: 2px;
    transition: height 0.5s;
    &-content {
      position: relative;
	    display: block;
      top: 16px;
	    width: 100%;
	    transition: transform 0.5s;
    }
  }
  & .input--filled .input__label {
    &-content {
      transform: translate3d(0, -34px, 0);
    }
  }
  & .input--filled .input__focuslabel {
    height: 20px;
    & .input__focuslabel-content {
      transform: translate3d(0, -15px, 0);
    }
  }
}