Skip to content

CSS input field floating labels animation

Demo of floating label that overlaps the border of the input field when it is focused or filled out.

Tailwind CSS code:

<div class="absolute mt-3">
  <input type="text" id="email" class="form-input px-4 py-3 absolute top-0 left-0 border border-black focus:border-red-400 rounded outline-none" placeholder=" ">
  <label for="email" class="form-label absolute left-2 top-3 px-2 text-slate-400 cursor-text transition-all bg-white">email</label>

With additional css:

.form-input:focus ~ .form-label,
.form-input:not(:placeholder-shown).form-input:not(:focus) ~ .form-label {
  top: -0.5rem;
  font-size: 0.8rem;