У меня есть поле ввода текста. Есть label, который находится в этом поле. Когда нажимаю на поле для ввода текста - label поднимается вверх и я ввожу свой текст, но после ввода(т.е., когда мышей кликаю где-то на экране) label опускается на своё место и, таким образом, падает на введённый текст. Помогите сделать так, чтобы при заполненном поле label оставался на своём месте.
P.S. JS код отсутствует, но если он необходим, тогда давайте на чистом JS.
input {
margin: 50px;
width: 17%;
}
label {
margin: 50px;
position: absolute;
left: 5px;
}
input:focus ~ label, input.used ~ label {
top: -20px;
}
<!DOCTYPE html>
<html><head>
<link href="./text.css" rel="stylesheet"></head>
<body>
<input type="text" id="userName" onkeydown="if(event.keyCode == 13) authorization();"><span class="highlight"></span><span
class="bar"></span>
<label for="userName">Name</label>
</body></html>