Верстка формы поиска. Стильное поле поиска на CSS3 Форма поиска html5 css3
Меня раскритиковали, мол верстка отстой, есть же современные 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. Спасибо критикам за комментарии к предыдущей статье! Благодаря вам, у меня в голове отложились некоторые новые для меня моменты по верстке.
В статье описаны особенности верстки поисковой формы сайта, приведен пример семантичной разметки кода, оформление на CSS3, плюс в конце немного магии jQuery.
-
Разметка
До появления HTML5 форма поиска делалась обычным текстовым полем, с постепенным приходом в нашу жизнь новой версии языка разметки для нее появился специальный тип поля search . Так что в HTML коде современного сайта мы можем увидеть что-то вроде этого:
Результат кода в FF, Opera, IE9:
И немного по другому в браузерах на движке вебкит (Chrome, Safari):
Поле поиска в вебкитахКак видите, при фокусе на поле добавляется подсветка, а при вводе текста появляется кнопка очистки, при нажатии на нее содержимое поля удаляется, что само по себе достаточно удобно.
Без CSS оформления наша форма поиска пока выглядит достаточно просто, в этой статье мы попробуем сделать нечто вроде этого:
например: верстка формы поиска
Если не планируется поддержка старых браузеров, пустой несемантичный элемент
можно заменить псевдоэлементом:before .Особенности оформления поисковой формы
Поскольку я решил использовать достаточно много CSS3 свойств, в старых браузерах Internet Explorer эти чудеса работать не будут, и чтобы добиться кроссбраузерности, нужно подключать костыли, что-то делать картинками и т.д.
Первым делом хотелось бы обратить внимание на некоторые особенности, а именно:
- стилизация в браузерах на движке вебкит
- стилизация placeholder
Стили формы поиска в браузерах Chrome, Safari
Добавим к полю с классом.search какой-нибудь стиль:
Search { background: #d8e6ef; border: 1px solid #000; }
Результат на скриншоте:
Search в браузерах FF, Opera, Chrome и SafariКак обычно в браузерах наблюдается шатание и разброд, в Chrome как-то странно работает border (появляются поля, как будто задаем padding), Safari же полностью игнорирует правила. Но есть решение в данной ситуации, добавляем такое правило в CSS-код:
Search { -webkit-appearance: none; }
Теперь в вебкитах все стало нормально, но они все еще отличаются подсветкой полей при фокусе по умолчанию и кнопкой очистки. Эти элементы, хоть часто и бывают удобны, иногда могут портить задумку дизайна и их необходимо отключать. Подсветку убрать очень просто:
Search:focus { outline: none; /* убрали подсветку при фокусе */ -moz-box-shadow: inset 0 0 2px #000; -o-box-shadow: inset 0 0 2px #000; -webkit-box-shadow: inset 0 0 2px #000; box-shadow: inset 0 0 2px #000; /* добавили внутреннюю тень в качестве альтернативы для всех браузеров */ }
Остается избавиться от кнопки очистки. На самом деле ее можно легко стилизовать, заменив простой крестик каким-нибудь фоном, позиционировать и т.д., однако в моем примере она будет не нужна:
/* правило только к элементу с классом search */ .search::-webkit-search-cancel-button { display: none; /* убрали кнопку очистки */ } /* или ко всем полям с типом search в документе */ input::-webkit-search-cancel-button { display: none; }
Оформление текстовой подсказки placeholder
К сожалению с текстовой подсказкой все немного сложнее, чем кажется на первый взгляд. Во-первых, она не работает в IE9, не говоря уже о старых браузерах, поэтому в критичных местах, где обязательно изначально нужен какой-то текст в поле, следует использовать JavaScript. Во-вторых, placeholder плохо поддается оформлению в браузерах Firefox, Chrome, Safari и совсем не поддается в Opera:
:-moz-placeholder { color: #304e62; /* изменили цвет в FF */ } ::-webkit-input-placeholder { color: #304e62; /* изменили цвет в вебкитах */ }
Обратите внимание на то что данные селекторы не будут работать, если их перечислять через запятую, каждый должен начинаться с новой строки.
Я рассмотрел особенные моменты, при которых могли возникнуть трудности, остальная часть для более-менее опытного верстальщика проблем вызвать не должна.
Скрипты jQuery
Напоследок добавим немного скриптов нашей форме, а именно:
- сделаем отмену запроса и вывод сообщения об ошибке при отправлении пустого поля
- при фокусе на поле добавим небольшую всплывающую подсказку внизу
Очень просто это все реализовать мощью jQ, у меня получился такой код с комментариями:
$(function() { /* обрабатываем отправку формы */ $(".search-form").submit(function() { var errVal = "пустой запрос"; /* Если поле пустое или содержит значение errVal */ if($(".search").val() == "" || $(".search").val() == errVal) { /* добавить в поле значение errVal, изменить цвет фона и */ $(".search").val(errVal).css({backgroundColor: "rgba(0,0,0,.1)"}); /* возвратить false - форма не отправляется */ return false; }; }); /* при фокусе на поле */ $(".search").focus(function() { /* выставить пустое значение поля, задать цвет фона в изначальный */ $(this).val("").css({backgroundColor: "#d8e6ef"}); /* показать всплывающую подсказку */ $(".notice").fadeIn(400); }); /* при снятии фокуса */ $(".search").blur(function() { /* убрать всплывающую подсказку */ $(".notice").fadeOut(400); }); });
Конечно лучше всего в скрипте заменить классы на идентификаторы для более быстрой работы сценария, да и при появлении других элементов с такими же классами в документе работу скрипта они уже не сломают.
Итоги
Таким образом мы сверстали и запрограммили поисковую форму для сайта, работает в последних версиях Firefox, Chrome, Opera, Safari и IE9+. При большом желании можно сделать более-менее кроссбраузерную версию, начиная хоть с IE6.
Проверено
- Internet Explorer 9+
- Opera
- Firefox
- Chrome
- Safari
Помощь проекту
Поле поиска, вероятно, является одним из распространенных элементов интерфейса пользователя. Работая над уровнем удобства интерфейса очень часто возникает желание добавить стильное поле поиска. В данном уроке мы создадим такой популярный элемент с помощью псевдо-элементов.
Разметка HTML
Для подготовки такого поля разметка будет минимальна.
Здесь используются специальные атрибуты HTML5 placeholder и required:
- placeholder - данный атрибут задает вывод текста в поле перед тем, как поле получит фокус ввода, затем текст скрывается.
- required - данный атрибут задает обязательное условие наличие информации в поле ввода перед отправкой формы.
HTML5 также имеет новое значение для атрибута type: type="search" . Но она плохо поддерживается в браузерах, поэтому мы не будем его пока использовать.
Такие элементы HTML как img и input не имеют содержания. Следовательно псевдо-элемент, например:before, не будет выводить никаких стрелок для кнопки.
Решением данной задачи в нашем случае является использование button type="submit" вместо input type="submit" . Таким образом, мы сохраняем для формы использование клавиши ENTER.
CSS
Ниже приводятся необходимые для нашей демонстрации стили:
Отмена обтекания текстом
Cf:before, .cf:after{ content:""; display:table; } .cf:after{ clear:both; } .cf{ zoom:1; }
Элементы формы
Префиксы браузеров в коде уроке не приводятся для лучшей наглядности. Вы можете посмотреть полный код в тексте исходника.
/* Стили для контейнера формы */ .form-wrapper { width: 450px; padding: 15px; margin: 150px auto 50px auto; background: #444; background: rgba(0,0,0,.2); border-radius: 10px; box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2); } /* Стили поля ввода текста */ .form-wrapper input { width: 330px; height: 20px; padding: 10px 5px; float: left; font: bold 15px "lucida sans", "trebuchet MS", "Tahoma"; border: 0; background: #eee; border-radius: 3px 0 0 3px; } .form-wrapper input:focus { outline: 0; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,.8) inset; } .form-wrapper input::-webkit-input-placeholder { color: #999; font-weight: normal; font-style: italic; } .form-wrapper input:-moz-placeholder { color: #999; font-weight: normal; font-style: italic; } .form-wrapper input:-ms-input-placeholder { color: #999; font-weight: normal; font-style: italic; } /* Кнопка отправки формы */ .form-wrapper button { overflow: visible; position: relative; float: right; border: 0; padding: 0; cursor: pointer; height: 40px; width: 110px; font: bold 15px/40px "lucida sans", "trebuchet MS", "Tahoma"; color: #fff; text-transform: uppercase; background: #d83c3c; border-radius: 0 3px 3px 0; text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3); } .form-wrapper button:hover{ background: #e54040; } .form-wrapper button:active, .form-wrapper button:focus{ background: #c42f2f; outline: 0; } .form-wrapper button:before { /* стрелка влево */ content: ""; position: absolute; border-width: 8px 8px 8px 0; border-style: solid solid solid none; border-color: transparent #d83c3c transparent; top: 12px; left: -6px; } .form-wrapper button:hover:before{ border-right-color: #e54040; } .form-wrapper button:focus:before, .form-wrapper button:active:before{ border-right-color: #c42f2f; } .form-wrapper button::-moz-focus-inner { /* Удаляем дополнительное пространство рядом с кнопкой в Mozilla Firefox */ border: 0; padding: 0; }
Два варианта поисковых форм, которые позволяют сэкономить пространство на вашем сайте. При клике форма расширяется для ввода текста. Используется только CSS3 .
HTML
Простая форма с html5 тегом:
CSS
Сначала сделаем перезапуск стилей для webkit браузеров, которым свойственно добавлять к поисковым input тегам рамочку, иконку закрытия. Поэтому уберем все это лишнее:
Input { outline: none; } input { -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; /* remove the search and cancel icon */ }
Оформим форму поиска:
На всех свойствах останавливаться не будем, просто отметим, что ширина поискового input вначале имеет значение 55px , и будет расширться до 130px в момент фокуса :focus . Свойство transition позволяет анимировать это изменение ширины. Для свечения используется box-shadow :
Input { background: #ededed url(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: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 input поле поиска еще компактнее - отображаться будет только иконка. При клике по ней будет также происходить изменение ширины поля ввода.
#demo-b input { width: 18px; padding-left: 10px; color: transparent; cursor: pointer; } #demo-b input:hover { background-color: #fff; } #demo-b input:focus { width: 130px; padding-left: 32px; color: #000; background-color: #fff; cursor: auto; }
А текст сделали прозрачным:
#demo-b input:-moz-placeholder { color: transparent; } #demo-b input::-webkit-input-placeholder { color: transparent; }
Форма работает во всех современных браузерах Chrome , Firefox , Safari , и IE8+ .
Поле поиска для сайта — один из важнейших элементов пользовательского интерфейса на веб-странице. С его помощью пользователь может найти нужный контент на вашем сайте.
В этом уроке вы узнаете, как создать разметку для поля поиска с помощью HTML5, а также как стилизовать элементы формы, используя возможности CSS3, без использования скриптов.
1. Разметка HTML
Элемент
