Сегодня предлагаю вам сделать красивую форму поиска на 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 файлами. Теперь можно работать дальше.
Шаг 3 — работаем в CSS
Самое время приступить к написанию css кода. Начнем с правил для самого списка полей:
.search{
background: url(btn.png) no-repeat left top;
width: 268px;
height: 57px;
list-style: none;
}
- свойством
backgroundзадаю изображение кнопки и поля ввода, запрещаю повторение, позиционирование слева и сверху - ширину и высоту задаю по размерам вырезанной картинки
- свойством
list-style: noneудаляю маркеры у пунктов
Пока выглядит ужасно, не так ли?
Но ничего, сейчас мы сделаем нормально.
Шаг 4 — стилизуем поле для ввода текста
И сразу же привожу код, который я написал для стилизации поля для ввода текста.
.search input[type=text]{
border: none;
background: transparent;
margin: 15px -20px 3px -15px;
width: 170px;
padding: 5px;
font-size: 14px;
}
Заметьте, что для обращения к полю ввода я использовал селектор атрибута. Чтобы вы понимали, о чем речь, советую почитать эту статью.
Чем этот код помог? Он привел поле ввода в такой вид:
То есть вот, в нем прямо можно печатать, все отображается красиво:
А теперь поясняю этот код:
border: none— этим свойством мы убираем рамку у поля ввода, все эти рамки и фоны нам не нужны, потому что все уже есть на самой картинке, поэтому свойством background: transparent мы также делаем цвет фона прозрачным, чтобы не портил вид.margin— это внешние отступы, я прописал их так, чтобы поле ввода разместилось непосредственно в той части картинки, где у нас нарисованное поле. Для этого удобно использовать отладчик, который в браузере открывается нажатием F12.width— это, понятно, ширина, я указал ее примерно как ширину нарисованного поля.padding-и позволяют сделать само поле немного просторнее- ну и
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>
И вот что вышло:
Значит, дело замалым — спозиционировать иконку в правильное место. Как это сделать? Да на самом деле есть разные варианты:
- можно использовать абсолютное позиционирование относительно списка
- можно сделать кнопку-картинку плавающей и потом подогнать в нужное место с помощью маргинов
Я выбрал второй способ. Итак:
.search input[type=image]{
margin-top: -30px;
margin-right: 55px;
float: right;
}
Селектором .search input[type=image] я обращаюсь к кнопке-картинке. Собственно, в моем случае мне подошли именно такие margin-ы, ну а свойство float: right и делает блок плавающим, прижимая его к правому краю родительского блока.
Опять же, для подгонки кнопки в нужное место я использовал отладчик. Открыл его и в нем определил, какие именно margin-ы нужны, чтобы кнопка стала в нужное место. Чтобы посмотреть в отладчике стили элемента, щелкните по нему правой кнопкой и выберите Исследовать элемент.
В конце я добавлю кнопке вот такие стили, чтобы она при получении фокуса также не создавала рамку вокруг себя.
.search input[type=image]:focus{
border: none;
outline: none;
}
Вот итог:
Как видите, это красивая на вид форма поиска, которой приятно пользоваться.
Итог + можете попробовать сами
Вот мы и получили красивую форму поиска. Ну а для закрепления навыка советую вам сверстать еще 2 красивых формы поиска самостоятельно. По той ссылке, что я давал вначале, вы сможете скачать psd-исходники для трех форм. Вот даю ее еще раз:
https://ideasplayer.com/2011/12/free-custom-search-boxes-psd/
Попробуйте самостоятельно сверстать все их. Успехов. Благодарю за внимание!