раскрывающееся поле в html

<input type="search" placeholder="Искать">

Для формы используется HTML5. Код очень простой:

На мобильных устройствах идет учет каждого пикселя. Для минимизации требуемого для вывода формы пространства она будет изначально показываться в компактной форме и раскрываться по получению фокуса ввода (:focus). Такой подход позволяет сохранить место для других элементов интерфейса и содержания.

В данном уроке мы создадим раскрывающуюся форму поиска, которая отлично впишется в дизайн интерфейса для мобильных устройств. Для реализации элемента будет использоваться только CSS - никакого JavaScript и дополнительной разметки. Простой и эффективный способ для реализации компактной формы поиска.

Раскрывающееся поле поиска

Раскрывающееся поле поиска

Частная коллекция качественных материалов для тех, кто делает сайты

Раскрывающееся поле поиска