Пример верстки поисковой формы для сайта на HTML5 и CSS3

62 комментарияГлавная – CSS-верстка

После публикации вчерашней статьи по верстке поисковой формы меня раскритиковали, мол верстка отстой, есть же современные HTML5 и CSS3.

Я, конечно, понимаю, последние стандарты это круто и все такое. Но дело в том, что верстаю я, как правило, под заказ, а там в большинстве случаев важна полная идентичность в разных браузерах, что не позволяет использовать последние технологии. Поэтому я ориентируюсь в первую очередь на кроссбраузерность и поисковую форму по привычке сверстал «по-старому».

В общем, этим постом исправляю ситуацию (в угоду недовольным прошлой статьей =) и предлагаю свой вариант верстки той же самой поисковой формы, но уже с использованием технологий HTML5 и CSS3.

Пример того, что получится в результате, можно увидеть здесь.

Что мы теряем при верстке данной формы с помощью HTML5 и CSS3

IE9 и ниже — не увидим текст по умолчанию (атрибут placeholder).
IE8 и ниже — не увидим закругленных углов и внутренних теней.
IE7 — для него приходится указать другую ширину формы, т.к. он не поддерживает свойство box-sizing.
IE6 — а его вообще в расчет не берем =)

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

HTML-код формы поиска

Выглядит он вот так:

<form action="" method="post" class="search">
	<input type="search" name="" placeholder="поиск" class="input" />
	<input type="submit" name="" value="" class="submit" />
</form>

По сравнению с формой из предыдущей статьи здесь внесены следующее изменения в соответствии с технологией HTML5:

Атрибут type="text" заменен type="search".
Инлайновый скрипт заменен на placeholder="поиск".

CSS-код

Вот все необходимые стили с комментариями:

.search {
	/* устанавливаем необходимую ширину формы в зависимости от дизайна
	** форма без проблем растягивается */
	width: 35%;

	/* кнопку отправки будем позиционировать абсолютно,
	** поэтому необходимо это свойство */
	position: relative;
}

.search input {
	/* отключаем бордюры у инпутов */
	border: none;
}

/* стили для поля ввода */
.search .input {
	/* растягиваем поле ввода на всю ширину формы */
	width: 100%;

	/* за счет верхнего (8px) и нижнего (9px) внутренних отступов
	** регулируем высоту формы
	** внутренний отступ справа (37px) делаем больше левого,
	** т.к. там будет размещена кнопка отправки	*/
	padding: 8px 37px 9px 15px;

	/* чтобы ширина поля ввода (100%) включала в себя внутренние отступы */
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	/* добавляем внутренние тени */
	box-shadow: inset 0 0 5px rgba(0,0,0,0.1), inset 0 1px 2px rgba(0,0,0,0.3);

	/* закругляем углы */
	border-radius: 20px;

	background: #EEE;
	font: 13px Tahoma, Arial, sans-serif;
	color: #555;
	outline: none;
}

/* меняем оформление поля ввода при фокусе */
.search .input:focus {
	box-shadow: inset 0 0 5px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0,0,0.4);
	background: #E8E8E8;
	color: #333;
}

/* оформляем кнопку отправки */
.search .submit {
	/* позиционируем кнопку абсолютно от правого края формы */
	position: absolute;
	top: 0;
	right: 0;

	width: 37px;

	/* растягиваем кнопку на всю высоту формы */
	height: 100%;

	cursor: pointer;
	background: url(https://lh4.googleusercontent.com/-b-5aBxcxarY/UAfFW9lVyjI/AAAAAAAABUg/gQtEXuPuIds/s13/go.png) 50% no-repeat;

	/* добавляем прозрачность кнопке отправки */
	opacity: 0.5;
}

/* при наведении курсора меняем прозрачность кнопки отправки */
.search .submit:hover {
	opacity: 0.8;
}

/* данное свойство необходимо для того, чтобы в браузерах
** Chrome и Safari можно было стилизовать инпуты */
input[type="search"] {
	-webkit-appearance: none;
}

И стили для IE ниже 9-й версии:

/* задаем отдельные стили для браузеров IE ниже 9-й версии */
*+html .search {
	/* для IE7 подгоняем ширину под другие браузеры и добавляем правый
	** внутренний отступ, чтобы кнопка отправки встала на свое место */
	width: 28%;
	padding: 0 52px 0 0;
}
.search .input {
	border: 1px solid #DFDFDF;
	border-top: 1px solid #B3B3B3;
	padding-top: 7px;
	padding-bottom: 8px;
}
.search .input:focus {
	border: 1px solid #CFCFCF;
	border-top: 1px solid #999;
}
.search .submit {
	filter: alpha(opacity=50);
}
.search .submit:hover {
	filter: alpha(opacity=80);
}

P.S. Спасибо критикам за комментарии к предыдущей статье! Благодаря вам, у меня в голове отложились некоторые новые для меня моменты по верстке.