Input placeholder custom

by tripcollor

HTML

<div class="input-item">
  <input required class="inner-input" type="text" name="">
  <span class="centered placeholder"><span class="placeholder_inner">Имя</span></span>
  <span class="border"></span>
</div>

SCSS

.input-item{
  vertical-align: top;
  display: inline-block;
  position: relative;
  text-align: left;
  font-size: 20px;
  color: #000;
  height: 40px;
  .placeholder{
    position: absolute;
    pointer-events: none;
    left: 0;
    bottom: 0;
    line-height: 1.2;
    transition: all 500ms;
    width: 100%;
    height: 100%;
    transform-origin: bottom left;
    text-align: left;
    &_inner{
      display: inline-block;
      vertical-align: middle;
    }
  }

  .border{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    &:after{
      content: "";
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background: #000;
    }
    &:before{
      content: "";
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: red;
      z-index: 2;
      transform: scale(0);
      transition: all 700ms;
    }
  }

  .inner-input{
    height: 100%;
    width: 100%;
    border: none;
    font-size: 18px;
    outline: none;
    background: transparent;
    outline: none;

    &:invalid,
    &:focus,
    &:active,
    &:hover{
      outline: 0;
      outline-offset: 0;
      box-shadow: none;
    }
    &:focus ~ .placeholder{
      transform-origin: left;
      transform: scale(0.75) translateY(-20px);
      color: #000;
    }
    &:focus ~ .border{
      &:before{
        transform: scale(1);
      }
    }
  }
}

.input-field{
  .border{
    &:before{
      transform: scale(1);
    }
  }
  .placeholder{
    transform-origin: left;
    transform: scale(0.75) translateY(-20px);
    color: #000;
  }
}

JavaScript

//Animation input placeholder
function animatedInputPlaceholder() {
	var inputInnerAll = $('.input-item > .inner-input');

	inputInnerAll.each(function () {
		if($(this).val() != ''){
			$(this).parent().addClass('input-field');
			$(this).parent().removeClass('input-invalid');
		}
	});


	inputInnerAll.change(function(event) {
    if($(this).val() != ''){
			$(this).parent().addClass('input-field');
			$(this).parent().removeClass('input-invalid');
		}else{
			$(this).parent().removeClass('input-field');
		}
  });
}
animatedInputPlaceholder();