Верстка формы поиска. Компактная форма поиска на CSS3 Форма поиска css3
В статье описаны особенности верстки поисковой формы сайта, приведен пример семантичной разметки кода, оформление на CSS3, плюс в конце немного магии jQuery.
Разметка
До появления HTML5 форма поиска делалась обычным текстовым полем, с постепенным приходом в нашу жизнь новой версии языка разметки для нее появился специальный тип поля search . Так что в HTML коде современного сайта мы можем увидеть что-то вроде этого:
Результат кода в FF, Opera, IE9:
И немного по другому в браузерах на движке вебкит (Chrome, Safari):
Поле поиска в вебкитах
Как видите, при фокусе на поле добавляется подсветка, а при вводе текста появляется кнопка очистки, при нажатии на нее содержимое поля удаляется, что само по себе достаточно удобно.
Без CSS оформления наша форма поиска пока выглядит достаточно просто, в этой статье мы попробуем сделать нечто вроде этого:
например: верстка формы поиска
Если не планируется поддержка старых браузеров, пустой несемантичный элемент
можно заменить псевдоэлементом:before .
Особенности оформления поисковой формы
Поскольку я решил использовать достаточно много CSS3 свойств, в старых браузерах Internet Explorer эти чудеса работать не будут, и чтобы добиться кроссбраузерности, нужно подключать костыли, что-то делать картинками и т.д.
Первым делом хотелось бы обратить внимание на некоторые особенности, а именно:
стилизация в браузерах на движке вебкит
стилизация placeholder
Стили формы поиска в браузерах Chrome, Safari
Добавим к полю с классом.search какой-нибудь стиль:
Как обычно в браузерах наблюдается шатание и разброд, в 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
Помощь проекту
Поле поиска для сайта
— один из важнейших элементов пользовательского интерфейса на веб-странице. С его помощью пользователь может найти нужный контент на вашем сайте.
В этом уроке вы узнаете, как создать разметку для поля поиска с помощью HTML5, а также как стилизовать элементы формы, используя возможности CSS3, без использования скриптов.
Loading...