Адаптивная форма поиска CSS

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

Сложность

Назначение

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

HTML Разметка

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

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

Сброс CSS

По умолчанию в браузерах Webkit форма поиска css будет иметь следующий вид:

Для того, чтобы форма поиска выглядела как обычное поле ввода текста, добавим следующие стили:

input[type=search] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    font-family: inherit;
    font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
    display: none;
}

Формирование формы поиска

Поле ввода будет иметь ширину в 55px и раскрываться до 130px в состоянии :focus. Свойство CSS transition используем для анимации, а box-shadow для эффекта свечения.

input[type=search] {
    background: #ededed url(img/search-icon.png) no-repeat 9px center;
    border: solid 1px #ccc;
    padding: 9px 10px 9px 32px;
    width: 55px; /* Ширина по умолчанию */
    
    -webkit-border-radius: 10em;
    -moz-border-radius: 10em;
    border-radius: 10em;
    
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}
input[type=search]:focus {
    width: 130px; /* Ширина при наличии фокуса ввода */
    background-color: #fff;
    border-color: #6dcff6;
    
    -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
    -moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
    box-shadow: 0 0 5px rgba(109,207,246,.5); /* Эффект свечения */
}

Пример 2

Во втором примере форма поиска css существенно минимизирована - выводится только иконка без дополнительного текста. Обратите внимание, изменились отступы и ширина, для поля поиска, чтобы сформировать круглую кнопку. Для того, чтобы скрыть текст, добавим свойство color:transparent.

#demo-b input[type=search] {
    width: 15px;
    padding-left: 10px;
    color: transparent;
    cursor: pointer;
}
#demo-b input[type=search]:hover {
    background-color: #fff;
}
#demo-b input[type=search]:focus {
    width: 130px;
    padding-left: 32px;
    color: #000;
    background-color: #fff;
    cursor: auto;
}

Совместимость

Описанный метод работает во всех современных браузерах: Chrome, Firefox, Safari, и IE8+. В IE7. Поддержки старых браузеров нет, по причине отсутствия поддержки псевдо-класса :focus и типа поля поиска.

Перевод статьи Expandable Mobile Search Form

Тэги: transitionformsearch

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.