Красивая форма поиска на 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, чтобы сохранилась прозрачность.
картинка 1
Теперь я отключаю все, кроме иконки поиска, и сохраняю ее. Вот такая картинка у меня получилась.
картинка 2
Я назвал картинки btn.png и icon.png и поместило их в папку с html и css файлами. Теперь можно работать дальше.

Шаг 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/
другие формы
Попробуйте самостоятельно сверстать все их. Успехов. Благодарю за внимание!

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: