Элегантная форма поиска для сайта на uCoz

Элегантная форма поиска для сайта на uCoz

12016-12-101490510Денис Абдуллин

Новая форма поиска для сайтов на uCoz. Выполнена она в серых и синих тонах. Такую форму поиска можно установить в сайдбар или шапку сайта. И там и тут она будет смотреться хорошо.

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

Ставим стили для поиска:

Код
<style type="text/css">
.search {border:1px solid #D4D4D4 !important;-webkit-border-top-left-radius: 3px !important;-webkit-border-bottom-left-radius: 3px !important;-moz-border-radius-topleft: 3px !important;-moz-border-radius-bottomleft: 3px !important;border-top-left-radius: 3px !important;border-bottom-left-radius: 3px !important;background:#EEEEEE !important;-webkit-border-top-right-radius: 0px !important;-webkit-border-bottom-right-radius: 0px !important;-moz-border-radius-topright: 0px !important;-moz-border-radius-bottomright: 0px !important;border-top-right-radius: 0px !important;border-bottom-right-radius: 0px !important;color:#9A9A9A !important;width:200px;height:26px !important;padding-left:5px !important; padding:0; margin:0 !important;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}  
.searchbu {background:url('http://yraaa.ru/_pu/16/45358267.png') no-repeat !important;width:31px !important;height:26px !important;border:none !important;cursor: pointer !important;position:absolute !important;margin-left:-10px;-webkit-border-radius: 0px !important;-moz-border-radius: 0px !important;border-radius: 0px !important;}  
.search, input[type="text"]:focus {outline: none;}  
</style>

Это ставим туда где хотите видеть форму поиска:

Код
<form action="/search">  
<input type="text" name="q" maxlength="30" size="20" class="search" placeholder="Поиск..." />  
<input type="submit" class="searchbu" value="" />  
</form>

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (10)
Андрей Петренко 2013-09-18 в 12:03 / МатериалСпам
Скорее симпатичная...
0
Филипп 2012-10-14 в 15:54 / МатериалСпам
Ilia, Хотель сделать, но увы времени мало.
0
Филипп 2012-10-14 в 14:35 / МатериалСпам
Знаю...
0
Илья Дементьев 2012-10-14 в 15:09 / МатериалСпам
Красиво, но ожидал эффекта при наведении
0
Кирилл Косырев 2012-10-14 в 14:34 / МатериалСпам
А, ну тогда понятно. Но пару эффектов не сделано
0
Филипп 2012-10-14 в 12:10 / МатериалСпам
kiruxaable, Не знаю, так psd называлась! ;)
PSD: http://vk.com/wall-38368309_2236
1
Кирилл Косырев 2012-10-14 в 11:39 / МатериалСпам
И чем она элегантная?
1
Dimka Avdeev 2016-11-23 в 14:21 / МатериалСпам
а есть ли возможность менять расположение данного поиска?! т.е. подвинуть вниз на пару пунктов или подвинуть вправо на пару пунктов... спасибо заранее за ответ...
0
Олег 2016-12-22 в 11:05 / МатериалСпам
Почему то иконка как на рисунке не отображается, просто стандартный "бутон квадрат..."
0
2018-12-26 в 14:23 / МатериалСпам
Не возможно сделать эту форму поиска по центру из-за position absolute. Мне это неудобно. Придется другую форму поиска искать.
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.