Создал поле ввода

Резидент Казахстана Оракул (68913) Albert M, https://codepen.io/topicstarter/pen/wvNBvRo этот пример не мой, но суть там есть

Андрей Панарин Искусственный Интеллект (249370) Сделал слегка костыльное решение — через пустой pattern проверять, что в поле нет текста, и только в этом случае помещать туда лейбл. Иначе поднимать его выше. HTML:

 
 
   
  Ввод: 
 

CSS:

 .container { 
  position: relative; 
  padding-top: 25px; 
} 
 
#def + label { 
  position: absolute; 
  left: 4px; 
  transition: top 0.2s ease-in-out, color 0.2s ease-in-out; 
  top: 25px; 
} 
 
#def:not(:focus):valid + label { 
  color: gray; 
} 
 
#def:focus + label, #def:not(:valid) + label { 
  color: black; 
  top: 0px; 
}