On gists

Textfield label animation

CSS CSS trick

demo.html Raw #

<!-- https://codepen.io/codegem-io/pen/poeeZOd -->

<style>
.wrapper {
  display: block;
  position: relative;
  width: 300px;
}

.placeholder {
  position: absolute;
  left: 9px;
  top: 13px;
  padding: 0 4px;
  color: var(--accent-color);

  background-color: var(--bkg-color);
  transform-origin: top left;
  transition: all 120ms ease-in;
}

.textfield:focus + .placeholder,
.textfield:not(:placeholder-shown) + .placeholder {
  top: -5px;
  transform: scale(0.8);
  font-weight: bold;
}


</style>

<label class="wrapper">
  <input type="input" class="textfield" autocomplete="off" placeholder=" " />
  <span class="placeholder">Name</span>
</label>