@Alisa94

Как сделать, чтобы поля не падали друг на друга?

У меня есть поле ввода текста. Есть 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>
  • Вопрос задан
  • 143 просмотра
Решения вопроса 1
@Alisa94 Автор вопроса
Оказывается нужно было написать вместо input:focus ~ label, input.used ~ label этот код - input:focus ~ label, input:valid ~ label
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
@hesrun
Божечки!!! Это неведомая плавающая "штука", называется - floating label. Что нужно сделать.
1. Заходим на Кодпен
2. Вбиваем в поиск "floating label"
3. Выбираем что Вам угодно, на чистом js, jquery, react, vue, angular, без скриптов...
Ответ написан
@glagolew059
frontend developer
SpiderPigAndCat
@SpiderPigAndCat
занимаюсь салообразованием
dolgoter.site

кликни на контакты. я там такое сделал
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы