Стильная форма поиска для сайта 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 | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 6 | |
|
| |
