Move Placeholder Above the Animation Input on Focus In Pure CSS

Input Animation is a pure CSS implementation of the Float Lable style as seen in Android and iOS.

floating label input css, floating label for select box css, floating placeholder css, floating label css, floating label like bootstrap, floating label css without required

How to make use of it:

1. Wrap the input field with a placeholder to a label element as follows:

<label class="custom-field">
  <input type="text" required/>
  <span class="placeholder">Animated Placeholder</span>
</label>

2. Style the custom input field and move the placeholder to the top of that input field.

.custom-field {
  position: relative;
  font-size: 14px;
  padding-top: 20px;
}

.custom-field input {
  border: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none ;
  appearance: none;
  outline: none;
  background-color: #f2f2f2;
  padding: 12px;
  border-radius: 3px;
  width: 250px;
  font-size: 14px;
}

.custom-field .placeholder {
  position: absolute;
  left: 12px;
  top: calc(50% + 10px);
  transform: translateY(-50%);
  color: #aaa ;
  transition: 
      top 0.3s ease-in-out,
      font-size 0.3s ease-in-out,
      color 0.3s ease-in-out;
}

.custom-field input:valid + .placeholder,
.custom-field input:focus + .placeholder {
  top: 10px;
  font-size: 12px;
  color: #aaa;
}

Floating Input Placeholder In Pure CSS, Animation Input Plugin/Github, floating label select dropdown, move placeholder above the input on focus