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

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

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

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

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

Шаг 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{ 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:focus{ border: none; outline: none; box-shadow: none; }

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

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

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

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

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

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

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

можно использовать абсолютное позиционирование относительно списка

можно сделать кнопку-картинку плавающей и потом подогнать в нужное место с помощью маргинов

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

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

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

Приветствую всех читателей и подписчиков сайт. Сегодня я расскажу о том, Как сверстать стильную HTML форму поиска для сайта.

На большинстве сайтов и блогов с большим количеством разнообразной информации используются такие формы. Они позволяют посетителям найти нужную статью по ключевым словам, думаю, все их видели.

С точки зрения браузера – это простые HTML формы, с двумя элементами: текстовое поле и кнопка, которая отправляет запрос. Иногда кнопки может и не быть, тогда форма отправляется нажатием клавиши enter.

В качестве примера я взял одну из работ с сайта premiumpixels.com. Вот ссылка на сам пост. Этот бесплатный psd файл с оформлением шести видов форм выглядит, как показано на картинке ниже. Вы можете скачать и сам PSD с того сайта, так как он распространяется бесплатно.

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

Что у нас получится в итоге, смотрите ниже:

Итак, как я уже сказал, HTML код представляет собой форму с двумя элементами input. Для удобства оформления, каждый из них я обернул в блок div.

Для всех видов оформления, этот код будет один и тот же.

Кто работал с Drupal 7, могут увидеть, что эта структура очень похожа на стандартную форму поиска в Drupal 7. Так и есть. Если вы будете встраивать это оформление в свой сайт на этой CMS, вам не понадобится что-то менять в выводе HTML (кроме placeholder, см.ниже).

Для поля ввода мы задаём атрибут placeholder. Значение этого атрибута показывается внутри поля ввода, и пропадает, когда поле получает фокус. Очень удобное свойство.

По умолчанию в разных браузерах вся эта форма поиска будет выглядеть по-разному, и везде не очень стильно. Например, её вид в Opera и Safari показан ниже:

Поэтому нам не обойтись без стилевой разметки. Рассмотрим стили для круглой светлой версии. В CSS файл нужно вставить следующий код:

#search-block-form{ width:248px; height:28px; border-radius:15px; border:#c9c9c9 solid 1px; background:url(images/searchBg.png) left top repeat-x; } .focus-active{ border-color:#aaa !important; background:#fff !important; } #search-block-form input{ padding:0; margin:0; display:block; border:none; outline:none; background:none; width:100%; height:100%; } #search-block-form .form-actions{ width:28px; height:28px; float:left; background:url(images/searchIcon.png) 5px 2px no-repeat; } #search-block-form .form-actions input:hover{ cursor:pointer; } #search-block-form .form-actions input{ overflow:hidden; text-indent:-9999px; } #search-block-form .form-item{ width:210px; padding:0px 5px; float:right; height:28px; } #search-block-form .form-item input{ font:13px/16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#222; height:auto !important; padding:6px 0; } .placeholder{color:#cbcbcb !important;}

Разберём по порядку и подробнее. Сначала мы задаём самой форме c идентификатором #search-block-form размеры, цвет рамки и скругление углов.

#search-block-form{ width:248px; height:28px; border-radius:15px; border:#c9c9c9 solid 1px; background:url(images/searchBg.png) left top repeat-x; }

Все внутренние элементы не будут иметь цвета фона или границ, поэтому отменяем все стандартные свойства у обоих тегов input.

#search-block-form input{ padding:0; margin:0; display:block; border:none; outline:none; background:none; width:100%; height:100%; }

Задавать оформление мы будет по возможности, div-ам в которые обёрнуты элементы, а не им самим.

Блок form-actions будет держаться левой стороны, а form-item – правой. У кнопки отправления формы есть текст, а нам он не нужен, поэтому убираем его следующим известным методом.

#search-block-form .form-actions input{ overflow:hidden; text-indent:-9999px; }

#search-block-form .form-item input{ font:13px/16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#222; height:auto !important; padding:6px 0; }

Теперь рассмотрим JavaScript код.

/* Скопируйте код ниже в ваш js файл. (JavaScript). */ $(document).ready(function(e) { $("input").placeholder(); $("#search-block-form .form-item input").focus(function(){ $("#search-block-form").addClass("focus-active"); }) .blur(function(){ $("#search-block-form").removeClass("focus-active"); }); }); /* Конец */

Казалось бы, зачем здесь нужен JavaScript? На самом деле он добавляет несколько полезных для юзабилити вещей.

Во-первых, свойство placeholder пришло вместе с HTML5, и его поддержка в старых браузерах оставляет желать лучшего. Но есть простое решение в виде jQuery плагина jQuery-Placeholder , который обеспечит поддержку этого свойства у всех браузеров (включая даже IE6!).

Для этого подключаем сам файл и включаем эту функцию:

$("input").placeholder();

Если уж мы подключили jQuery, то можно сделать ещё что-нибуть. Например, пусть при получении фокуса формой, она как-то изменяется.

Для этого мы создали специальный класс focus-active. При добавлении этого класса к форме она меняет цвет фона на белый, а цвет рамки становится немного темнее. Форма станет как бы реагировать на действия пользователя.

Focus-active{ border-color:#aaa !important; background:#fff !important; }

Класс.placeholder оформляет текст из атрибута placeholder в старых браузерах. Этот класс возможно использовать только если мы используем тот самый jQuery плагин.

Placeholder{color:#cbcbcb !important;}

Вот и всё. Мы создали форму поиска, которую несложно интегрировать в большинство сайтов.

Другие версии не сильно отличаются, смотрите исходный код демо-страниц, там есть необходимые комментарии.

На сегодня всё. Пишите в комментариях, о чём бы вы хотели прочесть в новых постах блога, а так же подписывайтесь на RSS и получайте информацию об обновлении сайт первыми!

Каждый веб ресурс имеет свой поиск по блогу/caйту. Для чего нужно окно для поиска? Если на вашем блоге много контента, то стоит задуматься как посетители будут находить нужную информацию.

Для навигации по сайту существуют меню, карта сайта, рубрики, категории, но этого мало. Пришел допустим на блог посетитель и задержался у вас, не разобрался например в меню, в перелинковке, не нашел полностью ответ на свой запрос, тогда он смело может ввести в поиск слово или фразу, и откроются все статьи по заданному запросу.

Путать с общим поиском не нужно, поиск работает только с вашим веб ресурсом и помогает посетителям находить нужные материалы на ваших страницах и в ваших публикациях.

На платформе Blogger (Blogspot) по умолчанию встроен гаджет «Окно поиска» . Установка: Админ панель > Дизайн > Добавить гаджет. Из списка стандартных гаджетов выбираем «Окно поиска ». В настройке гаджета изменяем название Заголовка на свой текст.

Вставить поиск от поисковых систем . Поиск по сайту от поисковиков считается самым эффективным. Во-первых поисковики специализируются на поиске, во вторых: используют подсказки, учитывают морфологию языка, исправляют ошибки в запросе, учитывают статистику.

Пользовательский поиск от Google . Заходим на сайт http://www.google.ru/cse/ регистрируемся, получаем код, добавляем в блог как обычный гаджет.

Поиск по сайту через Яндекс устанавливается аналогично поиску от Google. Заходим на http://site.yandex.ru/ проходим регистрацию, получаем код. Бытует мнение, что при наличии поиска от Яндекса сайты индексируются быстрее.

Можно добавить свою форму поиска по блогу. Заходим в административную панель Blogger > Дизайн > Добавить гаджет > Html/Javascript. Добавляем в окно стиль СSS.

Стильное окно поиска по сайту CSS

}

#searchbox {
width: 240px;
}
#searchbox input {
outline: none;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input {
background: url(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;
border: 2px solid #f2f2f2;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #6A6F75;
width: 160px;
padding: 14px 17px 12px 30px;
-webkit-border-radius: 5px 0px 0px 5px;
-moz-border-radius: 5px 0px 0px 5px;
border-radius: 5px 0px 0px 5px;
text-shadow: 0 2px 3px #fff;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#searchbox input:focus {
background: #f7f7f7;
border: 2px solid #f7f7f7;
width: 200px;
padding-left: 10px;
}
#button-submit{
background: url(http://4.bp.blogspot.com/-slkXXLUcxqg/VEQI-sJKfZI/AAAAAAAAAlA/9UtEyStfDHw/s1600/slider-arrow-right.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 43px;
height: 45px;
}

Классическое поле для поиска по сайту CSS Поле поиска css

#searchbox { background: #d8d8d8; border: 4px solid #e8e8e8; padding: 20px 10px; width: 250px;}input:focus::-webkit-input-placeholder { color: transparent;}input:focus:-moz-placeholder { color: transparent;}input:focus::-moz-placeholder { color: transparent;}#searchbox input { outline: none;}#searchbox input { background: url(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 6px #fff; border-width: 1px; border-style: solid; border-color: #fff; font: bold 12px Arial,Helvetica,Sans-serif; color: #bebebe; width: 55%; padding: 8px 15px 8px 30px;}#button-submit { background: #6A6F75; border-width: 0px; padding: 9px 0px; width: 23%; cursor: pointer; font: bold 12px Arial, Helvetica; color: #fff; text-shadow: 0 1px 0 #555;}#button-submit:hover { background: #4f5356;}#button-submit:active { background: #5b5d60; outline: none;}#button-submit::-moz-focus-inner { border: 0;}

Предлагаю один из возможных вариантов верстки поисковой формы для сайта, которая будет выглядеть вот так:

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

А кнопка отправки формы накладывается поверх поля ввода.

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

Готовый сверстанный пример можно .

HTML-код формы поиска

Выглядит он следующим образом:

CSS-код

Я приготовил вот такой спрайт, который и будет использоваться при смене фокуса у поля ввода:

Привожу весь CSS-код с комментариями:

#search { /* устанавливаем ширину формы, ** равную ширине поля ввода (183 + 37 + 15) */ width: 235px; height: 29px; } /* делаем инпуты плавающими, чтобы убрать лишние отступы, ** и отключаем бордюры */ #search input { float: left; border: none; } /* стили для поля ввода */ #search .input { width: 183px; height: 28px; /* внутренний отступ справа (37px) делаем больше левого, ** т.к. там будет размещена кнопка отправки */ padding: 0 37px 1px 15px; background: #EEE url(https://lh4.googleusercontent.com/-EllJnywnmlY/UAaKJYSYYMI/AAAAAAAABUU/IaRo-yUcRmc/s235/search.png) no-repeat; color: #555; font: 13px/28px Tahoma, Arial, sans-serif; outline: none; } /* приходится использовать хак для FireFox ** для вертикального выравнивания текста, ** т.к. у него свои особые представления об этом */ @-moz-document url-prefix() { #search .input { height: 27px; padding-bottom: 2px; } } /* меняем оформление поля ввода при фокусе */ #search .input:focus { background-color: #E8E8E8; background-position: 0 -29px; color: #333; } /* оформляем кнопку отправки */ #search .submit { width: 37px; height: 29px; cursor: pointer; /* смещаем кнопку влево на собственную ширину, ** чтобы она оказалась над полем ввода */ margin-left: -37px; /* по-нормальному, здесь достаточно было бы указать background: none; ** но приходится указывать фон из-за бага в IE */ background: url(dontexist.png); }

Про баг в Internet Explorer

Internet Explorer как-то неожиданно для меня преподнес очередной сюрприз. Причем столкнулся я с ним совсем недавно. Суть в том, что, если у кнопки отправки убрать фон, то в IE она становится некликабельной, т.е. как будто прячется под поле ввода. И хоть добавляй к ней позиционирование (position), хоть повышай индекс слоя (z-index) — ни в какую не реагирует. Но стоит кнопке задать какую-нибудь фоновую картинку, даже несуществующую, проблема устраняется.

Данный баг наблюдается только в IE8 и IE9.

Задача

Разместить кнопку отправки формы внутри рамки для ввода текста.

Решение

Надо понимать, что напрямую добавить кнопку внутрь поля формы нельзя. Поэтому любые методы лишь имитируют этот эффект. Для создания подобной иллюзии следует убрать исходную рамку вокруг поля для поиска и добавить её к элементу, внутри которого располагается поле и кнопка. Данный метод лучше всего работает когда все размеры у нас имеют фиксированные значения. В примере 1 общая ширина формы задана как 300 пикселов, поле имеет ширину 274 пиксела, а кнопка - 20 пикселов. Ширина поля подобрана с учётом того, чтобы не возникало переносов в форме, это негативно скажется на общем виде.

Некоторых добавлений в код CSS потребуют браузеры Safari и Chrome. При получении фокуса поля формы подсвечиваются цветной рамкой, которая разрушает нашу иллюзию единого поля. Чтобы этого не возникало, в стиле поля для поиска добавим outline со значением none , это позволит заблокировать появление рамки в указанных браузерах. Вокруг поля поиска ( ) в любом случае останется тонкая рамка, её можно удалить с помощью специфического свойства -webkit-appearance опять же со значением none .

Пример 1. Форма поиска

HTML5 CSS 2.1 IE Cr Op Sa Fx

Форма для поиска .search { width: 300px; /* Ширина поля с кнопкой */ border: 1px solid #000; /* Параметры рамки */ min-height: 20px; /* Минимальная высота */ } input { border: none; /* Убираем рамку */ outline: none; /* Убираем свечение в Chrome и Safari */ -webkit-appearance: none; /* Убираем рамку в Chrome и Safari */ width: 274px; /* Ширина поля */ vertical-align: middle; /* Выравнивание по середине */ } input { width: 20px; /* Ширина кнопки */ height: 20px; /* Высота кнопки */ border: none; /* Убираем рамку */ background: url(images/video.png) no-repeat 50% 50%; /* Параметры фона */ }

Результат примера показан на рис. 1.

Рис. 1. Вид поля для поиска с кнопкой

Саму кнопку можно добавить по разному. Например, сделать её обычной кнопкой с надписью, через , или, как в примере выше, в виде кнопки с фоновым рисунком.