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

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

forma-dlya-poiska

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

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

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

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

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

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

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

  • vasya

    Как то все скучно. Картинку наложить на инпут.. тююю
    Вот лучше бы способ как кроссбраузерно изменить до не узнаваемости select вот это да! Это б я почитал!

    • gblok

      Поддержу Васю… Про кастумный select.. от профессионалов Дзен Верстки…в студию… а то ну блин детский сад

  • Darmoid

    А я б почитал про TDO Mini Forms Как правильно его использовать чтоб и ресурсов не много ел и чтоб польза от него была 🙂

  • а по-моему довольно полезно, поюзаю, спасибо автору

  • А теперь убираем лишние див и филдсет и вешаем класс на блочную форму!!1

  • Fieldset иногда вставляю, когда валидатор орет. Это реальный пример, вот здесь как раз возмущался…

  • А у меня она почему-то не работает, не ищет.(