Всплывающий плейсхоледр
Эффект, при котором плейсхолдер всплывает над элементом формы, можно сделать через код ниже:
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); }
Пример работы:
Поддержать автора