Пример верстки поисковой формы для сайта на HTML5 и CSS3
После публикации вчерашней статьи по верстке поисковой формы меня раскритиковали, мол верстка отстой, есть же современные 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. Спасибо критикам за комментарии к предыдущей статье! Благодаря вам, у меня в голове отложились некоторые новые для меня моменты по верстке.