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

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

demosourse

 

Назначение

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

Демонстрация         работы формы

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

 

Разметка HTML

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

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

 

Сбрасываем вид для формы поиска по умолчанию в браузерах Webkit

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

Внешний вид формы         поиска по умолчанию в браузерах Webkit

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

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. Свойство 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); /* Эффект свечения */
}

 

Пример В

В примере B форма поиска существенно минимизирована - выводится только иконка без заполняющего текста. Обратите внимание, что изменились свойства padding и width для поля поиска, чтобы сформировать круглую кнопку. Для того, чтобы текст был невидим используется свойство 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 и типа поля поиска.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: webdesignerwall.com/tutorials/expandable-mobile-search-form
Перевел: Сергей Фастунов
Урок создан: 7 Июля 2012
Просмотров: 46693
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 7 Июля 2012 11:24
    antosha
    классный пост спасибо переводчику
    • 7 Июля 2012 17:11
      mak326428
      +1 согласен
  • 7 Июля 2012 23:08
    emil4eg
    На сайте Apple.com действует такой же метод при нажатии на форму поиска.
  • 7 Июля 2012 23:28
    sasori
    Давно ждал такого урока. Спасибо
  • 8 Июля 2012 00:09
    Inch
    а разве нельзя просто тип поля заменить на текст?
  • 8 Июля 2012 20:06
    Dian
    Спасибо за материал.
  • 8 Июля 2012 21:19
    Radioactive
    Подскажите как сделать чтобы вариант А при наведении курсора раздвигался влево вместе с картинкой поиска и словом "искать", а не вправо как показано на демо
  • 9 Июля 2012 08:07
    rubyx
    Firefox и Google Chrome - работает отлично. IE 9 позорно-голый вид и Opera-нет плавности. Что делать с этим IE, сколько процентов этот используют в мире?
  • 13 Июля 2012 03:01
    Frostbite
    Чтобы в Opera была плавность нужно заменить префиксы -webkit- на -o- либо дублировать для нее стили
  • 13 Июля 2012 14:25
    steve
    10 осел справляется отлично
  • 25 Июля 2012 21:39
    khfs
    Спасибо большое
  • 20 Августа 2012 19:33
    elizarov_nikolai
    А как сделать, чтобы результаты выводились?
  • 14 Февраля 2013 17:19
    d_nik
    Подскажите как оформить подобным способом поиск в Joomla?
  • 6 Июля 2013 17:12
    Jahongir
    Спасибо большое за классный пост!!!
  • 5 Сентября 2013 02:58
    burnatoff
    а как сделать кнопку сброса? на картинке есть, а в коде никакого упоминания?
  • 11 Марта 2015 14:54
    shushkov_v
    Как сделать чтоб разворачивался не с лева на право а на оборот с права на лева? Извиняюсь, float: right;
^ Наверх ^