» »

Стильная форма поиска для сайта uCoz


Стильная форма поиска для сайта uCoz

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

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

Установка:

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://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/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;}


Сама основа кода, ставим там где хотите.

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


Чтоб посмотреть как реально будет, то вам представлена демонстрация.



Источник: Yraaa.ru
19.06.2016 Просмотров: 389 Комментарий: (7)

Поделиться в социальных сетях

Материал разместил

Комментарий: 6
Scheme
Scheme 19.06.2016 23:421
0
Вообще не понимаю, для чего делать какой то эффект на поиск, он должен работать, а так не чего смотрится.
Сопрано
Сопрано 19.06.2016 23:482
0
Мне кажется этот поиск мне уже знаком, может даже на этом сайте видел, но на темном фоне красиво.
Kosten
Kosten 19.06.2016 23:523
0
Возможно и есть, но не знаю, поискал не нашел, и решил разместить, и DEMO сразу сделать на его.
Scheme
Scheme 20.06.2016 00:514
0
Мне вот поиск по сайту от самого шаблона нравится, его еще можно сделать как нужно, но почему то его редко вижу, основном со стороны берут.
feliksteg
feliksteg 20.06.2016 00:595
0
Простой по дизайн поиск, мне больше нравится, когда сама кнопка отдельно идёт, по мне так красивей смотрится.
tsakonter
tsakonter 20.06.2016 01:116
0
Что далеко ходить, основной поиск от конструктора оставляют на шаблонах, который как раз идет от самого конструктора, а когда делаешь оригинальный, вот здесь и пригодится этот поиск.
avatar