CodePen Embed - Material Input Label

<label>
  <input placeholder=" ">
  <span>name</span>
</label>
<label>
  <input>
  <span>with no placeholder</span>
</label>
<label>
  <input placeholder=placeholder>
  <span>non empty placeholder</span>
</label>
<label>
  <input value=value placeholder=" ">
  <span>pre filled</span>
</label>

label {
  display: flex;
  flex-direction: column-reverse;
}
label>span {
  transition: all .2s;
  transform-origin: top left;
}
label>input[placeholder=" "]:not(:focus):placeholder-shown + span {
  transform: translateY(1em) scale(1.25);
  pointer-events: none;
  opacity: .5
}

This Pen is owned by Rémy F. on CodePen.

See more by @yne on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.