Разработка красивой формы поиска на CSS3. Разработка красивой формы поиска на CSS3 Оформление текстовой подсказки placeholder
Меня раскритиковали, мол верстка отстой, есть же современные HTML5 и CSS3.
Я, конечно, понимаю, последние стандарты это круто и все такое. Но дело в том, что верстаю я, как правило, под заказ, а там в большинстве случаев важна полная идентичность в разных браузерах, что не позволяет использовать последние технологии. Поэтому я ориентируюсь в первую очередь на кроссбраузерность и поисковую форму по привычке сверстал «по-старому».
В общем, этим постом исправляю ситуацию (в угоду недовольным прошлой статьей =) и предлагаю свой вариант верстки той же самой поисковой формы, но уже с использованием технологий HTML5 и CSS3.
Пример того, что получится в результате, можно .
Что мы теряем при верстке данной формы с помощью HTML5 и CSS3
IE9 и ниже — не увидим текст по умолчанию (атрибут placeholder).
IE8 и ниже — не увидим закругленных углов и внутренних теней.
IE7 — для него приходится указать другую ширину формы, т.к. он не поддерживает свойство box-sizing .
IE6 — а его вообще в расчет не берем =)
В остальных современных браузерах все замечательно. Я считаю, что вышеуказанные недостатки не критичны, поэтому для своего сайта я бы смело использовал форму, сверстанную по последним технологиям.
HTML-код формы поиска
Выглядит он вот так:
По сравнению с формой из предыдущей статьи здесь внесены следующее изменения в соответствии с технологией 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 {
-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.
Спасибо критикам за комментарии к предыдущей статье! Благодаря вам, у меня в голове отложились некоторые новые для меня моменты по верстке.
Поле поиска для сайта
— один из важнейших элементов пользовательского интерфейса на веб-странице. С его помощью пользователь может найти нужный контент на вашем сайте.
В этом уроке вы узнаете, как создать разметку для поля поиска с помощью HTML5, а также как стилизовать элементы формы, используя возможности CSS3, без использования скриптов.