вход

Как создать красивую форму для поиска при помощи CSS

Как создать красивую форму для поиска при помощи CSS

Здравствуйте уважаемые читатели блога mainview.ru. Сегодня небольшой урок для тех, кто осваивает CSS и HTML. Сегодня посмотрим, как можно создать красивую форму для поиска при помощи CSS, используя минимум кода. Создадим три формы для поиска в разной цветовой схеме, чтобы продемонстрировать, как такая форма будет выглядеть в разных цветовых решениях.

Итак, мы создадим три стиля : темно-серый, светло-серый и нейтрально серый, как на картинке ниже.

 

HTML

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

Ниже показано, как мы создаем три формы и что мы делаем. По сути, мы определяем три совершенно одинаковые структуры, различающиеся только назначенными классами. Разные классы отвечают за разное оформление.


<section class="container">
  
<h2>Красивая форма поиска - Демонстрация</h2>

<div class="lighter">
	<form>
		<span><input type="text" class="search rounded" placeholder="Искать..."></span>
		<span><input type="text" class="search square"><input type="button" value="Искать"></span>
	</form>
</div>

<div class="dark">
	<form>
		<span><input type="text" class="search rounded" placeholder="Искать..."></span>
		<span><input type="text" class="search square"><input type="button" value="Искать"></span>
	</form>
</div>

<div class="light">
	<form>
		<span><input type="text" class="search rounded" placeholder="Искать..."></span>
		<span><input type="text" class="search square"><input type="button" value="Искать"></span>
	</form>
</div>

</section>

 

Как видите, в каждом цветовом решении мы к тому же определили ещё и два способа оформления текстового поля, для ввода запроса. Сначала мо создали поле с округлыми краями, а затем обычное прямоугольное поле. Какое вам больше нравится, то и можете использовать при верстке. Также можете изменять радиус округления, получая немного другой эффект.

Базовым для всех полей ввода текста является класс search.

Стилизация форм

Сначала мы создадим общий стиль, который повторяется на всех вышеперечисленных формах.

form{
	width:500px;
	margin:0 auto;
}
.search { 
	padding:6px 15px 6px 30px;
	margin:3px; 
	background: url('search.png') no-repeat 8px 6px; 
}

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

Для тех полей ввода, которые мы хотим сделать со скруглёнными краями, назначаем соответствующий класс.

.rounded { 
	border-radius:15px; 
	-moz-border-radius:15px; 
	-webkit-border-radius:15px; 
}

Далее зададим остальные параметры для полей.


input[type=text]{
	color:#bcbcbc;
}

input[type=button], input[type=button]:hover {
	position:relative; 
	left:-6px;
	border:1px solid #adc5cf;
	background: #e4f1f9; /* Old browsers */
	background: -moz-linear-gradient(top, #e4f1f9 0%, #d5e7f3 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f1f9), color-stop(100%,#d5e7f3)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* IE10+ */
	background: linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f1f9', endColorstr='#d5e7f3',GradientType=0 ); /* IE6-9 */
	color:#7da2aa;
	cursor: pointer;
}

Устанавливаем основные дивы, которые содержат формы поиска.

.lighter, .light, .dark {
	width:95%;
	height:50px;
	padding:40px 25px;
}

Единственное различие между формами поиска в том, что содержащие их DIV контейнеры имеют различные фоны и текстовые поля имеют разные границы и цвета для фона.

 

Форма поиска в темно - сером цвете


.dark{
	background: url('dark_grey.jpg');
}
.dark input[type=text]{
	border:1px solid #2a2e31;
	background-color:#2d3035;
	color:#505358;
}

 

Форма поиска в светло - сером цвете


.light{
	background: url('light_grey.jpg');
}
.light input[type=text]{
	border:1px solid #acb1b7;
	background-color:#fcfcfc;
}

 

Форма поиска в нейтрально - сером цвете


.lighter{
	background: url('lighter_grey.jpg');
}
.lighter input[type=text]{
	border:1px solid #d0d0d0;
	background-color:#fcfcfc;
}

 

На этом создание красивой формы для поиска закончено. Теперь осталось только протестировать наш результат в браузере.

Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!


Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
Один комментарий :

Статья → Как создать красивую форму для поиска при помощи CSS

  1. Николай:

    у меня высота button меньше чем text, разве нужно добавить высоту в стили?спасибо

Оставить комментарий

Статья → Как создать красивую форму для поиска при помощи CSS

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.