Простая реализация подсказки внутри input-a
Demo
HTML
<div class="inputer"> <label>Название</label> <input type="text" name=""> </div>
CSS
.inputer { border: 1px solid #ddd; position: relative; display: block; width: 100%; max-width: 350px; border-radius: 4px; overflow: hidden; } .inputer label { position: absolute; top: 40%; left: 5px; opacity: 0; transition: all .1s linear; visibility: hidden; font-size: 12px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .inputer label, .inputer input::placeholder { color: #777; font-weight: bold; opacity: .8; } .inputer.active label { opacity: 1; top: 2px; visibility: visible; font-size: 11px; opacity: .8; } .inputer.active input { padding: 16px 5px 2px !important; } .inputer input, .inputer input:hover, .inputer input:focus, .inputer input:active { box-shadow: none; outline: none; border:none; border-radius: 0; display: block; width: 100%; padding: 9px 5px; font-size: 12px; }
JS
let inputerFn = (el) => { let $el = $(el); $el.parent().toggleClass('active', $el.val().length > 0); }; $('.inputer input').each(function (idx, el) { let $el = $(el); $el.attr('placeholder', $el.siblings('label').text()); inputerFn(el); }).on('input', function () { inputerFn(this); });
-
2
2 Комментария
Рекомендуемые комментарии
Для публикации сообщений создайте учётную запись или авторизуйтесь
Вы должны быть пользователем, чтобы оставить комментарий
Создать учетную запись
Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!
Регистрация нового пользователяВойти
Уже есть аккаунт? Войти в систему.
Войти