Всплывающие метки на чистом CSS с помощью псевдо-класса ::placeholder-shown

Всплывающие метки на чистом CSS с помощью псевдо-класса ::placeholder-shown

От автора: в этом руководстве мы создадим решение, как можно создать на чистом CSS метки, используя псевдо-класс ::placeholder-shown.

Техника плавающих меток

ИСХОДНЫЙ КОД | СМОТРЕТЬ ДЕМО

Когда мы имеем дело с полями ввода, существует множество методов, которые можно рассмотреть, чтобы предоставить пользователям лучший опыт. Нам необходимо убедиться, что мы даем пользователям необходимую информацию в каждый момент времени, а это значит найти баланс между слишком большим и слишком маленьким. Две довольно важные части для головоломки UX:

Элемент метки, согласно MDN, является единственным способом предоставить пояснительную информацию о поле формы, который всегда является уместным.

Атрибут placeholder для элемента ввода, в соответствии с MDN, позволяет указать текст, который отображается в области содержимого элемента input, когда она пуста. Он предназначен для отображения примера вводимых данных, а не для объяснения или подсказки.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Эти два элемента можно использовать в тандеме для создания пользовательского интерфейса с инструктивной формой, и один из возможных способов сделать это — то, что я называю «техника всплывающих меток». В этой реализации пользовательского интерфейса пользователь сталкивается со следующим потоком:

Они видят элемент ввода с заполнителем, отображающим некоторый описательный пример ввода, а метка изначально скрыта.

Когда они выделяют фокусом элемент ввода и начинают печатать, значащая метка всплывает с помощью анимации над элементом ввода.

До тех пор, пока в элементе есть значение, метка остается видимой и располагается над ним, чтобы напомнить пользователям исходное значение элемента ввода.

Эта техника пользовательского интерфейса действительно немного искажает определения метки и заполнителя, приведенные выше, в том смысле, что мы отдаем заполнителю более приоритетное значение для пояснения пользователю элемента ввода, но это компромисс для достижения аккуратности компонента пользовательского интерфейса, и мне лично он нравится. Вот предварительный просмотр того, что мы собираемся создать.

Всплывающие метки на чистом CSS

Регистрация события фокуса, определение того, содержит ли элемент ввода значение, анимация отображения скрытого элемента, принятие решения о необходимости отображения в зависимости от введенного значения… это похоже на работу для JavaScript, не так ли? Не так! Для всего этого мы будем использовать псевдо-класс CSS, :placeholder-shown. Из MDN:

Псевдо-класс CSS :placeholder-shown представляет любой элемент input или textarea, который в настоящее время отображает текст заполнителя.

Другими словами, если input содержит какое-либо значение, мы можем с уверенностью предположить, что псевдо-класс :placeholder-shown не будет достигнут в CSS. Вот ход моих мыслей относительно техники всплывающей метки:

Структурировать разметку таким образом, чтобы я мог указать метку в качестве смежного комбинатора одного уровня для элемента ввода и обернуть оба элемента в div.

Задать соответственно стили input и label, включая псевдо-элемент ::placeholder.

Переместить метку в исходное положение, которое вертикально центрируется в содержащем div и скрывается в нем.

Определить, когда отображать метку, используя комбинацию псевдо-классов :not, :focus и :placeholder-shown.

Если placeholder-shown отсутствует, тогда отображаем метку — input:not(:placeholder-shown) + label

Если элемент ввода выделен фокусом, а заполнитель не отображается, тогда выводим метку — input:focus:not(:placeholder-shown) + label.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Теперь давайте перейдем к HTML и CSS!

Построение метки

После переваривания всей этой информации сборка на самом деле довольно проста. Вот разметка:

А вот базовый CSS с некоторыми комментариями относительно того, что происходит на каждом этапе. Итоговая демо-версия ниже содержит полный CSS, который написан с использованием переменных CSS для простоты изменения и поддержки.

Полная демо-версия в действии

Если что-то из вышеперечисленного было вам непонятно, вот полная рабочая демо-версия в действии!

Поддержка браузерами

На данный момент поддержка довольно хороша, отстают только IE и Edge:

Chrome: 47+

Firefox: 51+

IE: Не поддерживается

Edge: Не поддерживается

Opera: 34+

Safari: 9+

Вы можете обойти отсутствие поддержки, используя некоторые интересные хаки, чтобы указать для браузеров IE и Edge условные стили input и label.

Заключение

Это все! Мне нравится, когда я открываю новые вещи в CSS, но еще больше мне нравится, когда я могу найти красивые способы сделать их применимыми. Надеюсь, вы кое-чему научились и сможете придумать интересные новые способы использования псевдо-класса :placeholder-shown. Еще раз спасибо за внимание, и если у вас есть и вопросы, комментарии или отзывы, вы можете отправлять мне твитты.

Источник: https://callmenick.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree