Input With Animated Placeholder Similar to the Google Login

Input with a floating/animated placeholder, the process is similar to logging in to Google. This plugin makes it behave like a floating label above the input field when in focus and is inspired by the Gmail login input.

animated placeholder css, input field placeholder animation, move label on input focus, gmail input css, form input animation css, floating label for select box css, placeholder as label

How to make use of it:

1. Add a customized placeholder to your input field as follows:

<div class="input-block">
  <input type="text" name="input-text" id="input-text" required spellcheck="false">
  <span class="placeholder">
    Placeholder
  </span>
</div>

2. The required CSS for the animated placeholder.

div.input-block {
  position: relative;
}

div.input-block input {
  font-size: 1.6rem;
  color: #495055;
  width: 350px;
  padding: 15px 15px;
  border-radius: 1rem;
  border: 2px solid #D9D9D9;
  outline: none;
}

div.input-block span.placeholder {
  position: absolute;
  margin: 17px 0;
  padding: 0 4px;
  color: #6c757d;
  display: flex;
  align-items: center;
  font-size: 1.6rem;
  top: 0;
  left: 17px;
  transition: all 0.2s;
  transform-origin: 0% 0%;
  background: none;
  pointer-events: none;
}

div.input-block input:valid+span.placeholder,
div.input-block input:focus+span.placeholder {
  transform: scale(0.8) translateY(-30px);
  background: #fff;
}

div.input-block input:focus {
  color: #284B63;
  border-color: #284B63;
}

div.input-block input:focus+span.placeholder {
  color: #284B63;
}

Gmail Login Inspired Animated Placeholder, Placeholder animated Plugin/Github, pure css floating label