Как отобразить кнопку поиска, когда поле поиска не пусто

Как отобразить кнопку поиска, когда поле поиска не пусто

От автора: я думаю, что селектор :placeholder-shown невероятно крут. Он позволяет выбрать заполнитель для input (<input placeholder=»…»>), когда этот заполнитель присутствует. В смысле, когда в поле еще не введено значение. Вы можете подумать, что input[value] можете это сделать или помочь сопоставить действительное значение, но это не так.

Это делает :placeholder-shown — одно из немногих имеющихся у нас CSS-свойств, которые могут реагировать на инициируемое пользователем состояние, в дополнение к :hover и ему подобным, :checked (хак чек-бокса!) и также невероятный :focus-within.

Один из способов, которым мы можем использовать его, это проверить, вводил ли пользователь какой-либо текст в поле поиска. Если да, то мы отображаем кнопку поиска визуально (никогда не скрывайте ее для вспомогательных технологий). Если нет, то оставляем ее скрытой. Это просто забавная маленькая «экономящая место» техника, не ужасная в отличие от всплывающих меток.

Итак, возможно, мы начнем с семантической формы поиска:

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

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

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

Мы скрываем метку поиска визуально с помощью одного из специальных классов только для программ чтения с экрана, потому что она всегда будет скрыта визуально. Но кнопку мы скроем, смещая ее за пределы формы с overflow: hidden.

Хитрость заключается в том, чтобы вернуть кнопку поиска обратно, когда заполнитель исчезнет (пользователь ввел значение):

Что дает нам:

Я знаю, что использование атрибута placeholder вообще сомнительно, поэтому ваше решение может отличаться. Я признаю, что в основном меня заинтриговали аспекты обработки состояния непосредственно в CSS и то, как его можно использовать — например, печально известный хак чек-бокса.

Поддержка также довольно хороша. Один из тех случаев, когда Edge — это настоящий Chromium, в чистом виде. Данные о поддержке браузера взяты с Caniuse, где вы можете найти более подробную информацию. Число указывает, что браузер поддерживает функцию с этой версии и выше.

Автор: Chris Coyier

Источник: https://css-tricks.com

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

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

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

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

HTML5: основы

Изучите HTML5 с нуля!

Смотреть

Метки:

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

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

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

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