Input focus + span?

Question

[alalala]

Подскажите
не могу понять куда что писать
запутался уже
суть такова, span находится над input
при фокусе спан уезжает вверх
но заполнив поле и перейдя к следующему, спан назад возвращается
как правильно с этими валидамиинвалидами прописать что бы при заполненном оставался на месте?

есть форма

<form>
<label><input type="text"/><span>Текст</span></label>
</form>

form label{
	position:relative;	
}
form label span{
	position:absolute;
	left: 10px;
	top:50%;
	transform: translateY(-50%);
	transition: 0.5s top;
}
form input:focus + span {
	top:-30px;
	color:#FFF;
}

form input:focus:invalid + span{
	top:-30px; не срабатывает

}

Answer 1

[lUser L]

https://codepen.io/5h4dy_s/pen/WNQgWza

Comments

[alalala]

Большое спасибо