Поиск для сайта является неотъемлемой его частью, по этому она является одним из часто используемых элементов веб интерфейса. Красивая ее реализация на сайте не только позволит привлечь внимание посетителей к поиску и сайту, но и сделать оригинальным ресурс над которым вы трудитесь. В данном уроке мы рассмотрим процесс создания стильной поисковой формы с использованием элементов CSS3. Что весьма хорошо сказывается на сайте, так как не подключаются дополнительные библиотеки скриптов, вот что у нас получилось..

 
Недавно у нас на сайте публиковалась схожая форма поиска, но с некоторыми отличиями. И так, для начала мы рассмотрим разметку HTML. Обратите внимание на специфические атрибуты HTML5 placeholder и required..

Очень хочется использовать атрибут  HTML5 type="search" для элемента input, но придется от него отказаться по причине несовместимости со старыми браузерами. Поэтому потребуется несколько дополнительных строк CSS кода для формирования нужного вида.

Теперь рассмотрим сами стили CSS, из которых будет состоять вся наша форма:

Форма готова. Но давайте рассмотрим некоторую проблему с которой Вы можете столкнуться в ходе создание такой поисковой формы, а именно- кроссбраузерность. Ниже приведены примеры как будет отображаться данная форма в различных браузерах. Обратите внимание, что в старых браузерах форма продолжает действовать и выглядит приятно, но теряет эффект 3D.

Современные браузеры, такие как Chrome, Firefox, Safari, Opera, IE10:

В настоящий момент Opera поддерживает атрибут HTML5 placeholder, но не позволяет задавать для него стили. Хорошей новостью является поддержка атрибута placeholder в Internet Explorer 10.

IE (IE6, IE7, IE8):

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.