<label for="phone">Cell Phone</label>
<input type="tel" name="phone" class="jpinput" id="phone" placeholder="(555) 555-5555">

// Demo Styles
// ====================================
html,body {height: 100%;}body{display: flex;flex-direction:row;align-items:center;justify-content:center;width:100%;}html{background:#5E5D5C;}label{display:inline-block;padding-right:10px;color:#D5D5D5}input:not([type="submit"]):not([type="reset"]):not([type="button"]){border:0;max-width:240px;}


// Placeholder Mixin
// ====================================

$pseudo-placeholder: "::-webkit-input-placeholder" "::-moz-placeholder" ":-ms-input-placeholder" "::placeholder";

@mixin placeholder-theme($placeholder-styles) {
  @each $pseudo in $pseudo-placeholder {
    @at-root #{&}#{$pseudo} {
      @each $key, $value in $placeholder-styles {
        #{$key}: #{$value};
      }
    }
  }
}

@mixin placeholder {
  @each $pseudo in $pseudo-placeholder {
    @at-root #{&}#{$pseudo} {
      @content
    }
  }
}


// Jumping Placeholder
// ====================================

$jpinput-height: 40px;
$jpinput-radius: 4px;
$jpinput-padding: 10px 16px;
$jpinput-bg: #8DAA91;
$jpinput-color: #4F4137;
$jpinput-ph-color: $jpinput-color;
$jpinput-phide-color: $jpinput-bg;

input {
  appearance: none;
  box-sizing: border-box;
  border-radius: $jpinput-radius;
  display: inline-block;
  outline: 0;
  width: 100%;
}

.jpinput {
  height: $jpinput-height;
  padding: $jpinput-padding;
  transition: transform 225ms ease-in-out;
  background: $jpinput-bg;
  color: $jpinput-color;

  @include placeholder {
    position: relative;
    top: 0;
    left: 0;
    transition: all 300ms ease-in-out;
    color: rgba($jpinput-ph-color, .5);
  }
}

.jpinput::-webkit-input-placeholder[style*=hidden] {
  transform: translateY(-$jpinput-height);
  opacity: 1;
  visibility: visible !important;
  color: $jpinput-phide-color;
}

// See:
// http://www.sitepoint.com/theming-form-elements-sass/