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

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

10.05.201695578fil_ru

Новая форма поиска для сайтов на 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>



Сохраните в социальную сеть
Комментарии (8)
И чем она элегантная?
0
Филипп 14.10.2012 в 12:10Спам
kiruxaable, Не знаю, так psd называлась! ;)
PSD: http://vk.com/wall-38368309_2236
1
А, ну тогда понятно. Но пару эффектов не сделано
0
Филипп 14.10.2012 в 14:35Спам
Знаю...
0
Красиво, но ожидал эффекта при наведении
0
Филипп 14.10.2012 в 15:54Спам
Ilia, Хотель сделать, но увы времени мало.
0
Скорее симпатичная...
0
Dimka Avdeev 23.11.2016 в 14:21Спам
а есть ли возможность менять расположение данного поиска?! т.е. подвинуть вниз на пару пунктов или подвинуть вправо на пару пунктов... спасибо заранее за ответ...
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт