» » >

Пять широких форм поиска для uCoz
·
28.09.2013, 20:34

Шаг 1 - Установим HTML:

Для начало нам следует удалить с вашей страницы сайта системную переменную отвечающую за вывод формы поиска:

HTML

$SEARCH_FORM$

отлично, теперь устанавливаем следующий html код:

HTML

<form class="poick_os" onsubmit="document.getElementById('sfSbm').disabled=true" method="get" action="/search/" >
  <input class="poick_pole" type="text" name="q" maxlength="45" value="Поиск..." onclick="if (this.value=='Поиск...'){this.value='';}"/>
  <input class="poick_knopka" type="submit" value="Найти" />
  <input type="hidden" name="t" value="0" />
  </form>

обратите внимания, что на странице демо я использовал один и тот же код формы поиска uCoz, но с разными классами (poick_os1, poick_os2 и т.д)

Шаг 2 - Установим CSS:

Теперь когда html каркас готов, стоит прописать ему один из пяти вариантов стилей, который вы выберите на свой вкус:

1 - Фиолетовая кнопка поиска:
CSS-Code

/* Форма поиска фиолетовая кнопка  
------------------------------------------*/
.poick_os {  
  float:left;
  padding:4px;  
  width:300px;
  background:#fff;
  border: 1px solid #A0A8AC;  
}  

.poick_os input {
  float:left;
  margin:0px;
  vertical-align:middle;  
  font:11px Verdana,Arial,Helvetica,sans-serif;
}

.poick_pole {
  color:#555;
  width:220px;
  height:15px;
  border:none;  
  padding:6px 4px;
}
   
.poick_knopka {  
  text-shadow: 1px 1px 1px #751a9b;
  width:70px;
  height:27px;
  cursor:pointer;
  background:#ce36fa;
  border:1px solid #a622e3;  
  color:#fff; font-weight: bold!important;  
}
   
.poick_knopka:hover {background:#b73cea;}

.poick_os,
.poick_knopka {  
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
2 - Синяя кнопка поиска:
CSS-Code

/* Форма поиска синяя кнопка  
------------------------------------------*/
.poick_os1 {  
  float:left;
  padding:4px;  
  width:300px;
  background:#fff;
  border: 1px solid #A0A8AC;  
}  

.poick_os1 input {
  float:left;
  margin:0px;
  vertical-align:middle;  
  font:11px Verdana,Arial,Helvetica,sans-serif;
}

.poick_pole1 {
  color:#555;
  width:220px;
  height:15px;
  border:none;  
  padding:6px 4px;
}
   
.poick_knopka1 {  
  text-shadow: 1px 1px 1px #1061B0;
  width:70px;
  height:27px;
  cursor:pointer;
  background:#36A6FA;
  border:1px solid #2290e3;  
  color:#fff; font-weight: bold!important;  
}
   
.poick_knopka1:hover {background:#3c9fea;}

.poick_os1,
.poick_knopka1 {  
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
3 - Красная кнопка поиска:
CSS-Code

/* Форма поиска красная кнопка  
------------------------------------------*/
.poick_os2 {  
  float:left;
  padding:4px;  
  width:300px;
  background:#fff;
  border: 1px solid #A0A8AC;  
}  

.poick_os2 input {
  float:left;
  margin:0px;
  vertical-align:middle;  
  font:11px Verdana,Arial,Helvetica,sans-serif;
}

.poick_pole2 {
  color:#555;
  width:220px;
  height:15px;
  border:none;  
  padding:6px 4px;
}
   
.poick_knopka2 {  
  text-shadow: 1px 1px 1px #b01010;
  width:70px;
  height:27px;
  cursor:pointer;
  background:#fa3636;
  border:1px solid #e32222;  
  color:#fff; font-weight: bold!important;  
}
   
.poick_knopka2:hover {background:#ea3c3c;}

.poick_os2,
.poick_knopka2 {  
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
4 - Зелёная кнопка поиска:
CSS-Code

/* Форма поиска зелёная кнопка  
------------------------------------------*/
.poick_os3 {  
  float:left;
  padding:4px;  
  width:300px;
  background:#fff;
  border: 1px solid #A0A8AC;  
}  

.poick_os3 input {
  float:left;
  margin:0px;
  vertical-align:middle;  
  font:11px Verdana,Arial,Helvetica,sans-serif;
}

.poick_pole3 {
  color:#555;
  width:220px;
  height:15px;
  border:none;  
  padding:6px 4px;
}
   
.poick_knopka3 {  
  text-shadow: 1px 1px 1px #368620;
  width:70px;
  height:27px;
  cursor:pointer;
  background:#6ae14a;
  border:1px solid #57c939;  
  color:#fff; font-weight: bold!important;  
}
   
.poick_knopka3:hover {background:#65d447;}

.poick_os3,
.poick_knopka3 {  
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
5 - Оранжевая кнопка поиска:
CSS-Code

/* Форма поиска оранжевая кнопка  
------------------------------------------*/
.poick_os4 {  
  float:left;
  padding:4px;  
  width:300px;
  background:#fff;
  border: 1px solid #A0A8AC;  
}  

.poick_os4 input {
  float:left;
  margin:0px;
  vertical-align:middle;  
  font:11px Verdana,Arial,Helvetica,sans-serif;
}

.poick_pole4 {
  color:#555;
  width:220px;
  height:15px;
  border:none;  
  padding:6px 4px;
}
   
.poick_knopka4 {  
  text-shadow: 1px 1px 1px #865520;
  width:70px;
  height:27px;
  cursor:pointer;
  background:#e1954a;
  border:1px solid #c97639;  
  color:#fff; font-weight: bold!important;  
}
   
.poick_knopka4:hover {background:#d48347;}

.poick_os4,
.poick_knopka4 {  
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
Примечание:

Для того, чтобы избавиться в браузере Google Chrome от прямоугольного оранжевого выделения в полях, пропишите в css стилях следующий код:

HTML

input,textarea {outline:none;}

На этом все, спасибо за внимание!

Категория: Форма Поиска и Подписки | Добавил: tashkent97
Просмотров: 704 | Загрузок: 327 | Источник: center-dm.ru | Рейтинг: 3.5/2
Всего комментариев: 0
dth="100%" cellspacing="1" cellpadding="2" class="commTable">
Имя *: Email:
Яндекс.Метрика Яндекс цитирования<