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


В данном уроке мы создадим раскрывающуюся форму поиска, которая отлично впишется в дизайн интерфейса для мобильных устройств. Для реализации элемента будет использоваться только CSS - никакого JavaScript и дополнительной разметки. Простой и эффективный способ для реализации компактной формы поиска. Назначение На мобильных устройствах идет учет каждого пикселя. Для минимизации требуемого для вывода формы пространства она будет изначально показываться в компактной форме и раскрываться по получению фокуса ввода (:focus). Такой подход позволяет сохранить место для других элементов интерфейса и содержания. Демонстрация работы формы Раскрывающееся поле поиска Разметка HTML Для формы используется HTML5. Код очень простой: 1 <form> 2 <input type="search" placeholder="Искать"> 3 </form> Сбрасываем вид для формы поиска по умолчанию в браузерах Webkit По умолчанию в браузерах Webkit форма поиска будет иметь следующий вид: Внешний вид формы поиска по умолчанию в браузерах Webkit Для того, чтобы форма поиска выглядела как обычное поле ввода текста нужно добавить следующие стили: 01 input[type=search] { 02 -webkit-appearance: textfield; 03 -webkit-box-sizing: content-box; 04 font-family: inherit; 05 font-size: 100%; 06 } 07 input::-webkit-search-decoration, 08 input::-webkit-search-cancel-button { 09 display: none; 10 } Формируем нашу форму поиска Поле ввода будет иметь обычную ширину 55px и раскрываться для 130px в состоянии :focus. Свойство transition используется для анимации, а box-shadow используется для эффекта свечения. 01 input[type=search] { 02 background: #ededed url(img/search-icon.png) no-repeat 9px center; 03 border: solid 1px #ccc; 04 padding: 9px 10px 9px 32px; 05 width: 55px; /* Ширина по умолчанию */ 06 07 -webkit-border-radius: 10em; 08 -moz-border-radius: 10em; 09 border-radius: 10em; 10 11 -webkit-transition: all .5s; 12 -moz-transition: all .5s; 13 transition: all .5s; 14 } 15 input[type=search]:focus { 16 width: 130px; /* Ширина при наличии фокуса ввода */ 17 background-color: #fff; 18 border-color: #6dcff6; 19 20 -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5); 21 -moz-box-shadow: 0 0 5px rgba(109,207,246,.5); 22 box-shadow: 0 0 5px rgba(109,207,246,.5); /* Эффект свечения */ 23 } Пример В В примере B форма поиска существенно минимизирована - выводится только иконка без заполняющего текста. Обратите внимание, что изменились свойства padding и width для поля поиска, чтобы сформировать круглую кнопку. Для того, чтобы текст был невидим используется свойство color:transparent. 01 #demo-b input[type=search] { 02 width: 15px; 03 padding-left: 10px; 04 color: transparent; 05 cursor: pointer; 06 } 07 #demo-b input[type=search]:hover { 08 background-color: #fff; 09 } 10 #demo-b input[type=search]:focus { 11 width: 130px; 12 padding-left: 32px; 13 color: #000; 14 background-color: #fff; 15 cursor: auto; 16 } Совместимость с браузерами Описанный метод работает во всех основных браузерах: Chrome, Firefox, Safari, и IE8+. В IE7 и старых браузерах функционал не действует по причине отсутствия поддержки псевдо-класса :focus и типа поля поиска.