Красивая форма поиска для сайта с эффектом растяжения средствами CSS
2013-04-26Здравствуйте! Меня зовут Лилла и я приветствую вас на своем новом сайте Веб Проделки!
Настал-таки момент, когда я приняла решение создать этот блог, где буду записывать свои заметки и памятки, а также делиться и обмениваться опытом с другими начинающими вебмастерами.
И начну я сегодня с небольшого рассказа-урока о том, как сделать симпатичную форму поиска для сайта.
Для появления на странице формы поиска по сайту необходим следующий код.
|
1 2 3 4 |
<form id="searchform" action="/search" method="get"> <input class="search-txt" type="text" placeholder="Поиск..." value=" " /> <input id="searchsubmit" type="submit" value="Искать" /> </form> |
Он должен быть вставлен в то место странички, где мы желаем видеть саму форму поиска. После этого появится стандартное прямоугольное окошечко и кнопка. Однако вам, скорее всего, хотелось бы лицезреть на своем сайте нечто более симпатичное, не правда ли? Например, такое.
Что ж, все в наших руках! Для придания форме поиска презентабельного и понятного вида воспользуемся средствами задания стилей с помощью CSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/*Поиск*/ #searchform { /*форма поиска*/ background:#900; padding:0px; margin-left:189px; margin-right:20px; vertical-align: middle; height:40px; width:300px; } .search-txt { /*поле для поиска*/ background: url("zoom.png") no-repeat scroll 5px 2px #fc6;/*добавляем картинку-лупу*/ padding: 0px 10px 0px 25px; /*внутренние отступы текста от рамки поля*/ border: 1px solid #000; /*рамка вокруг поля*/ border-radius: 10px; /*устанавливаем закругление для углов формы*/ -webkit-border-radius: 10px; /* закругляем уголки для webkit */ -moz-border-radius: 10px; /* закругляем уголки для firefox */ color: #600; /* цвет замещающего текста */ font-size: 1em; /*размер шрифта*/ font-family:Arial, Helvetica, sans-serif; /*тип шрифта*/ margin: 9px 0px 0px 30px; /*внешние отступы*/ height: 20px; /*высота поля*/ width: 160px;} /*ширина поля*/ |
Этот код должен быть внедрен на сайт либо внутри тегов <style></style>, а лучше всего вынесен (добавлен) в отдельный файл стилей style.css. И конечно же, чтобы все работало как следует, надо не забыть поместить в папку с картинками изображение лупы “zoom.png” и правильно прописать путь к нему.
После этого наша форма поиска становится гораздо симпатичнее. Кнопку “Искать” можно удалить, поскольку и само окно и без нее теперь достаточно информативно и понятно. Для этого из кода страницы нужно удалить строку:
|
1 |
<input type="submit" id="searchsubmit" value="Искать" /> |
Думаю, большинство пользователей, как и я, после набора в форме поискового запроса, чаще всего нажимают не кнопку, а клавишу Enter. Если же вам все равно хочется иметь кнопку поиска, можете подобрать и прописать стили для “searchsubmit” самостоятельно.
Еще можно добавить к нашей форме поиска эффект растяжения, то есть, сделать так, чтобы при установке курсора текстовое поле расширялось и ввод текста поискового запроса был более наглядным. Для этого в файле стилей или внутри тегов <style></style>, если вы использовали этот вариант, необходимо добавить еще один кусочек кода:
|
1 2 3 4 |
.search-txt:focus { /*активное поле для поиска*/ outline: none;/*убираем обводку-выделение вокруг поля при его активации*/ width:200px;/*растяжение поля при активации, указываем размер*/ } |
Отлично, теперь наша форма поиска стала более дружелюбной и живенькой, не так ли?
На этом заканчиваю свой первый урок, надеюсь, он получился достаточно простым и наглядным.
