Верстка нестандартной формы поиска

Этим постом я начинаю новую рубрику «Уроки и приемы», где буду делиться с вами приемами, методами и трюками верстки.
Начнем с простого, но эффектного приема — создание нестандартной формы поиска. Возьмем вот такую симпатичную форму.

forma-dlya-poiska

Сам код формы, в общем-то, стандартный, но с небольшой добавкой js для удобства.

DIV-ом я обернул здесь для удобства, а аттрибуты onfocus и onblur с js не дают исчезнуть надписи «Что будем искать?».

Рассмотрим теперь оформление:

Класс search задает основной внешний вид формы. С помощью свойства background мы подкладываем картинку формы поиска, а свойствами height и width задаем габариты формы.

Далее определяются стили уже самой строки ввода. Свойство background убирает стандартный фон, а border убирает границы формы. Таким образом, мы полностью вычистили стандартную форму. Теперь свойствами color и font определяем шрифт для строки поиска и задаем отступ для курсора на 38px (padding-left), чтобы убрать его с картинки.

Смотрите рабочий пример.

Как видите, ничего сложного, рекомендую самостоятельно поэкспериментировать.