Лучшая форма поиска для блога на CSS3

Владислав Белецкий
Владислав Белецкий .
Категория:
Комментариев: 0

В этой статье рассматривается пример создания формы поиска для блога на WordPress, с использованием HTML5 и CSS3.

Форма будет одинаково отображаться во всех браузерах, и иметь валидный HTML5 и CSS3 код.

Созданная форма будет обладать такими качествами, как:

  • закругленные уголки,
  • изображение внутри input,
  • размер input изменяется при щелчке на нем,
  • кнопка для очистки формы.

Шаг 1. Настройки functions.php

Для начала, в папке с вашей темой найдите файл functions.php. Убедитесь, что функции get_search_form там нет. Это можно сделать через поиск. Теперь добавьте следующее:

Мы создали HTML5-код формы поиска.

Обратите внимание на 4-5 строки: там используется новый HTML5 атрибут placeholder, который добавляет замещающий текст для строки поиска input.

Также, в 4 строке для input задан тип type=”search”. Это добавляет кнопку-крестик, при помощи которой можно быстро очистить форму поиска.

Теперь давайте создадим стиль CSS3 для формы.

Шаг 2. Добавляем стили формы

Откройте файл style.css. Если в нем уже прописаны какие-то свойства для формы поиска, то их надо удалить.

Теперь надо добавить следующий код:

Сейчас вы создали стиль для самой формы. Теперь надо добавить стили для полей.

Шаг 3. Добавляем стили полей

Сначала пропишем основные стили input:

Теперь добавим изображение лупы внутрь формы:

Padding нужен для того, чтобы вводимый текст начинался после изображения.

Сейчас сделаем уголки закругленными:

В итоге, стили для поля input должны выглядеть так:

Шаг 4. Настройка активного поля input

Сейчас, если вы откроете вашу форму в браузере, то увидите, что при нажатии на нее, она будет подсвечиваться по контуру. Давайте уберем рамку у активного input:

Далее, можно сделать изменяющийся размер input, когда при нажатии на него мышкой, он будет увеличиваться влево:

Помните, когда в самом начале написали float: right? Так вот, кроме выравнивания, это свойство дает эффект увеличения влево.

Шаг 5. Последние штрихи

И последнее, уберем отображение кнопки “Поиск” и надписи “Найти:”.

Шаг 6. Вставим форму поиска в шаблон

Вставить форму поиска в шаблон можно такой функцией:

Также вы можете использовать виджет “Поиск”.

Форма будет выглядеть так:

Если у вас появились какие-то вопросы, пишите, я обязательно отвечу 🙂

Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии