Красивая форма поиска на css

Сегодня предлагаю вам сделать красивую форму поиска на CSS. Согласитесь, стандартное оформление форм в html не впечатляет, но сегодня мы сделаем форму-конфетку. Вот такую я нашел для этой статьи:

кнопка как будет выглядеть

Покажу пошагово, от а до я, как создать такую форму. Скачать psd макеты этой и еще двух красивых форм можно здесь, чтобы вырезать потом нужные картинки.
https://ideasplayer.com/2011/12/free-custom-search-boxes-psd/

Шаг 1 — html разметка формы

Для начала создадим саму форму. Она будет состоять из двух полей — обычное поле для ввода текста и кнопка-картинка, которую мы зададим позднее.

<form method="get" action="">
<ul class="search">
    <li><input type="text" name="search" placeholder="поиск..."></li>
    <li><input type="image" src=""></li>
</ul>
</form>

Пока все это выглядит очень печально:

первый вид

Шаг 2 — вырезаю нужные картинки с макета

Для создания формы я вырежу 2 картинки.
Первая это поле ввода и сама кнопка. Для этого отключите слои с текстом и иконкой поиска, остальное можно выделить и сохранить для web, только обязательно в формате png-24, чтобы сохранилась прозрачность.

Теперь я отключаю все, кроме иконки поиска, и сохраняю ее. Вот такая картинка у меня получилась. Я назвал картинки btn.png и icon.png и поместило их в папку с html и css файлами. Теперь можно работать дальше.

картинка 1
картинка 2

Шаг 3 — работаем в CSS

Самое время приступить к написанию css кода. Начнем с правил для самого списка полей:

.search{
    background: url(btn.png) no-repeat left top;
    width: 268px;
    height: 57px;
    list-style: none;
}
  1. свойством background задаю изображение кнопки и поля ввода, запрещаю повторение, позиционирование слева и сверху
  2. ширину и высоту задаю по размерам вырезанной картинки
  3. свойством list-style: none удаляю маркеры у пунктов
в процессе

Пока выглядит ужасно, не так ли? Но ничего, сейчас мы сделаем нормально.

Шаг 4 — стилизуем поле для ввода текста

И сразу же привожу код, который я написал для стилизации поля для ввода текста.

.search input[type=text]{
    border: none;
    background: transparent;
    margin: 15px -20px 3px -15px;
    width: 170px;
    padding: 5px;
    font-size: 14px;
}

Заметьте, что для обращения к полю ввода я использовал селектор атрибута. Чтобы вы понимали, о чем речь, советую почитать эту статью.

Чем этот код помог? Он привел поле ввода в такой вид:

поле ввода готово

То есть вот, в нем прямо можно печатать, все отображается красиво:

набор текста

А теперь поясняю этот код:

  1. border: none - этим свойством мы убираем рамку у поля ввода, все эти рамки и фоны нам не нужны, потому что все уже есть на самой картинке, поэтому свойством background: transparent мы также делаем цвет фона прозрачным, чтобы не портил вид.
  2. margin— это внешние отступы, я прописал их так, чтобы поле ввода разместилось непосредственно в той части картинки, где у нас нарисованное поле. Для этого удобно использовать отладчик, который в браузере открывается нажатием F12.
  3. width— это, понятно, ширина, я указал ее примерно как ширину нарисованного поля.
  4. padding-и позволяют сделать само поле немного просторнее
  5. ну и font-size это просто размер шрифта у вводимого в поле текста.

Также дополнительно чтобы при получении фокуса у поля не появлялась предательская синяя обводка, я добавил такие стили.

.search input[type=text]:focus{
    border: none;
    outline: none;
    box-shadow: none;
}

Псевдокласс :focus как раз отвечает за стили для полей, когда они получают фокус.

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

Шаг 5 — дорабатываем форму, добавляем иконку поиска

Я напомню вам, что кусок кода, отвечающий за вывод второй кнопки выглядит так:

<li><input type="image" src=""></li>

Соответственно, у нас пустой атрибут src, куда нужно вписать путь к изображению, которое и должно стать кнопкой. Поскольку изображение я назвал icon.png и разместил в той же директории, что и html файл, то мой код будет таким:

<li><input type="image" src="icon.png"></li>

И вот что вышло:

вставляем иконку

Значит, дело замалым — спозиционировать иконку в правильное место. Как это сделать? Да на самом деле есть разные варианты:

  1. можно использовать абсолютное позиционирование относительно списка
  2. можно сделать кнопку-картинку плавающей и потом подогнать в нужное место с помощью маргинов

Я выбрал второй способ. Итак:

.search input[type=image]{
    margin-top: -30px;
    margin-right: 55px;
    float: right;
}

Селектором .search input[type=image] я обращаюсь к кнопке-картинке. Собственно, в моем случае мне подошли именно такие margin-ы, ну а свойство float: right и делает блок плавающим, прижимая его к правому краю родительского блока.

Опять же, для подгонки кнопки в нужное место я использовал отладчик. Открыл его и в нем определил, какие именно margin-ы нужны, чтобы кнопка стала в нужное место. Чтобы посмотреть в отладчике стили элемента, щелкните по нему правой кнопкой и выберите Исследовать элемент.

отладчик 2

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

.search input[type=image]:focus{
    border: none;
    outline: none;
}

Вот итог:

готово

Как видите, это красивая на вид форма поиска, которой приятно пользоваться.

Итог + можете попробовать сами

другие формы

Вот мы и получили красивую форму поиска. Ну а для закрепления навыка советую вам сверстать еще 2 красивых формы поиска самостоятельно. По той ссылке, что я давал вначале, вы сможете скачать psd-исходники для трех форм. Вот даю ее еще раз: https://ideasplayer.com/2011/12/free-custom-search-boxes-psd/

Попробуйте сверстать все их. Успехов.

Понравилась статья? Поделиться с друзьями:
Комментариев: 1
  1. Николай

    Всё бы ничего, но type="image" говорит о том, что это изображение. И что куда будет уходить при нажатии?

    Я ещё чайник, и не скрываю это, но мне кажется , что КНОПКА , это всё таки type="submit". Что бы форма работала и отправляла данные. Может я не прав.

    Если подскажите как сделать кнопку в форме поиска в виде картинки (лупа как правило), буду благодарен. Самый простой вариант, но я на большее пока не размахиваюсь. )

Добавить комментарий