Всплывающий плейсхоледр

Эффект, при котором плейсхолдер всплывает над элементом формы, можно сделать через код ниже:

HTML:

<label>
  <input type="text" placeholder="">
  <span class="placeholder">Ваше имя</span>
</label>

CSS:

label {
  position: relative;
}

.placeholder {
  position: absolute;
  left: 10px;
  bottom: 4px;
  transform: translate(0, 4px) scale(1);
  transition: all .3s;
}

input[type="text"]:not(:placeholder-shown) + .placeholder,
input[type="text"]:focus-visible + .placeholder {
  transform: translate(-3px, -35px) scale(1.3);
}

Пример работы: