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